/*
 * Tainacan Busca Segmentada — painel, "Encontrado em" e sugestões.
 *
 * As cores e raios vêm de variáveis do tema, com um adaptador por tema:
 *  - .tss--tainacan: variáveis do Tainacan (--tainacan-secondary, --tainacan-gray*),
 *    que o tema Tainacan Interface e o bloco de busca facetada definem;
 *  - .tss--blocksy:  paleta do Blocksy (--theme-palette-color-1..8), que o tema
 *    filho e o plugin tainacan-blocksy herdam;
 *  - .tss--neutral:  herda cor e fonte do contexto.
 * A fonte é sempre herdada: o painel fica dentro da página do tema.
 */

.tss,
.tss-found,
.tss-suggest {
	--tss-accent: #298596;
	--tss-accent-strong: #1d6470;
	--tss-soft: #e8f4f6;
	--tss-ink: inherit;
	--tss-text: inherit;
	--tss-muted: #6b7280;
	--tss-border: rgba(0, 0, 0, .12);
	--tss-surface: transparent;
	--tss-card: rgba(0, 0, 0, .025);
	--tss-radius: 8px;
	--tss-pill: 999px;
}

.tss--tainacan {
	--tss-accent: var(--tainacan-secondary, #298596);
	--tss-accent-strong: var(--tainacan-turquoise6, #1d6470);
	--tss-soft: var(--tainacan-turquoise1, #e6f6f8);
	--tss-ink: var(--tainacan-heading-color, var(--tainacan-black, #000));
	--tss-text: var(--tainacan-input-color, var(--tainacan-gray5, #454647));
	--tss-muted: var(--tainacan-info-color, var(--tainacan-gray4, #898d8f));
	--tss-border: var(--tainacan-gray2, #dbdbdb);
	--tss-surface: var(--tainacan-background-color, #fff);
	--tss-card: var(--tainacan-gray0, #f8f8f8);
	--tss-radius: var(--tainacan-container-border-radius, 4px);
	--tss-pill: var(--tainacan-button-border-radius, 18px);
}

.tss--blocksy {
	--tss-accent: var(--theme-palette-color-1, #2872fa);
	--tss-accent-strong: var(--theme-palette-color-2, #1559ed);
	--tss-soft: color-mix(in srgb, var(--theme-palette-color-1, #2872fa) 10%, transparent);
	--tss-ink: var(--theme-headings-color, var(--theme-palette-color-4, #192a3d));
	--tss-text: var(--theme-text-color, var(--theme-palette-color-3, #3a4f66));
	--tss-muted: color-mix(in srgb, var(--theme-text-color, #3a4f66) 70%, transparent);
	--tss-border: var(--theme-border-color, var(--theme-palette-color-5, #e1e8ed));
	--tss-surface: var(--theme-palette-color-8, #fff);
	--tss-card: var(--theme-palette-color-7, #fafbfc);
	--tss-radius: var(--theme-border-radius, 7px);
	--tss-pill: var(--theme-button-border-radius, 999px);
}

/* ── Painel ─────────────────────────────────────────────────────── */

.tss {
	box-sizing: border-box;
	margin: 0 0 1.25rem;
	padding: .9rem 1rem 1rem;
	background: var(--tss-surface);
	color: var(--tss-text);
	border: 1px solid var(--tss-border);
	border-left: 4px solid var(--tss-accent);
	border-radius: var(--tss-radius);
	font-size: .875rem;
	line-height: 1.45;
}
.tss[hidden] { display: none !important; }
.tss *, .tss *::before, .tss *::after { box-sizing: border-box; }

.tss__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem 1rem;
	flex-wrap: wrap;
}
.tss__heading { display: flex; align-items: baseline; gap: .25rem .75rem; flex-wrap: wrap; min-width: 0; }
.tss__title { margin: 0; font-size: 1em; font-weight: 700; color: var(--tss-ink); }
.tss__engine { font-size: .75em; color: var(--tss-muted); font-variant-numeric: tabular-nums; }
.tss__actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }

.tss__toggle,
.tss__clear {
	appearance: none;
	font: inherit;
	font-size: .8em;
	font-weight: 600;
	line-height: 1.2;
	padding: .35em .85em;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-pill);
	background: transparent;
	color: var(--tss-accent-strong);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.tss__toggle:hover, .tss__toggle:focus-visible,
.tss__clear:hover, .tss__clear:focus-visible {
	border-color: var(--tss-accent);
	background: var(--tss-soft);
	color: var(--tss-accent-strong);
	text-decoration: none;
}
:where(.tss) :focus-visible { outline: 2px solid var(--tss-accent); outline-offset: 2px; }

.tss__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}
.tss__chips li { margin: 0; padding: 0; }
.tss__chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	max-width: 100%;
	padding: .25em .4em .25em .75em;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-pill);
	background: var(--tss-card);
	color: var(--tss-ink);
	font-size: .82em;
	text-decoration: none;
}
.tss__chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tss__chip-n {
	min-width: 1.6em;
	padding: 0 .45em;
	border-radius: var(--tss-pill);
	background: var(--tss-accent);
	color: #fff;
	font-size: .9em;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.tss__chip:hover, .tss__chip:focus-visible { border-color: var(--tss-accent); background: var(--tss-soft); text-decoration: none; color: var(--tss-ink); }

.tss__hint { margin: .6rem 0 0; font-size: .8em; color: var(--tss-muted); }

/* Palavra corrigida: fica visível mesmo com o painel recolhido. */
.tss__corrected {
	margin: .5rem 0 .2rem;
	padding: .5rem .75rem;
	border-left: 3px solid var(--tss-accent);
	background: var(--tss-soft);
	border-radius: 0 6px 6px 0;
	font-size: .9em;
	color: var(--tss-ink);
}
.tss__corrected-link { font-weight: 700; color: var(--tss-accent); white-space: nowrap; }
.tss__corrected-link:hover, .tss__corrected-link:focus-visible { text-decoration: underline; }
.tss__loading { margin: 0; font-size: .85em; color: var(--tss-muted); }

.tss__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: .6rem;
	margin-top: .6rem;
}
.tss.is-collapsed .tss__grid,
.tss.is-collapsed .tss__hint { display: none; }

.tss__seg {
	min-width: 0;
	padding: .65rem .75rem .75rem;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-radius);
	background: var(--tss-card);
	transition: box-shadow .3s;
}
.tss__seg.is-flash { box-shadow: 0 0 0 3px var(--tss-soft), 0 0 0 4px var(--tss-accent); }
.tss__seg-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tss__seg-label {
	font-size: .72em;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tss-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tss__seg-total { flex-shrink: 0; font-size: .75em; color: var(--tss-muted); font-variant-numeric: tabular-nums; }

.tss__list { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.tss__list li { margin: 0; padding: 0; }

.tss__value {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .3em .7em;
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-pill);
	background: var(--tss-surface);
	color: var(--tss-ink);
	text-decoration: none;
	min-width: 0;
}
.tss__value:hover, .tss__value:focus-visible { border-color: var(--tss-accent); background: var(--tss-soft); color: var(--tss-accent-strong); text-decoration: none; }
.tss__value-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tss__count { flex-shrink: 0; font-size: .78em; color: var(--tss-muted); font-variant-numeric: tabular-nums; }

.tss__sample { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--tss-ink); text-decoration: none; }
.tss__sample:hover span, .tss__sample:focus-visible span { color: var(--tss-accent-strong); text-decoration: underline; }
.tss__sample img, .tss__sample-ph {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: calc(var(--tss-radius) / 2);
	background: var(--tss-border);
}
.tss__sample span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92em; }

.tss__view {
	display: inline-block;
	margin-top: .55rem;
	font-size: .8em;
	font-weight: 700;
	color: var(--tss-accent-strong);
	text-decoration: none;
}
.tss__view:hover, .tss__view:focus-visible { text-decoration: underline; }
.tss__more-note, .tss__more-segs { margin: .45rem 0 0; font-size: .75em; color: var(--tss-muted); }
.tss__more-segs { grid-column: 1 / -1; }

.tss--admin { margin: .5rem 0 .9rem; }

/* ── "Encontrado em" em cada item ──────────────────────────────── */

/*
 * O lugar do "Encontrado em" tem ALTURA FIXA desde a renderização do item.
 * As visualizações em mosaico/fichas do Tainacan medem a altura de cada item
 * ao desenhar e o cartão tem overflow:hidden; o conteúdo chega depois (API),
 * e sem a reserva ficava cortado na borda do cartão (visto no brasiliana3).
 */
.tss-found-slot {
	box-sizing: border-box;
	height: 3.1rem;
	margin: .25rem .9rem .75rem;
	overflow: hidden;
}
.tss-found {
	box-sizing: border-box;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	/* Exatamente duas linhas: com padding embaixo, a 3ª linha aparecia pela metade. */
	max-height: calc(2.8em + .3rem);
	margin: 0;
	padding: .3rem .5rem 0;
	border-radius: 0 calc(var(--tss-radius) / 2) calc(var(--tss-radius) / 2) 0;
	border-left: 3px solid var(--tss-accent);
	background: var(--tss-card);
	color: var(--tss-text);
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	word-break: break-word;
}
.tss-found__lead { margin-right: .35em; color: var(--tss-muted); }
.tss-found__field + .tss-found__field::before { content: " · "; color: var(--tss-muted); }
.tss-found__field strong { font-weight: 700; color: var(--tss-ink); }
.tss-found__field strong::after { content: ":"; }
.tss-found mark {
	padding: 0 .1em;
	border-radius: 2px;
	background: var(--tss-soft);
	color: var(--tss-accent-strong);
	font-weight: 700;
}
.tss-found__partial { color: var(--tss-muted); font-style: italic; }
.tss-found__more { margin-left: .35em; color: var(--tss-muted); }
.tss-found .is-partial strong { font-weight: 600; }

/* Admin (sem gancho por item): o bloco é anexado, sem reserva de altura. */
.tss-found:not(.tss-found-slot .tss-found) { margin-top: .35rem; -webkit-line-clamp: 3; }
/* Tabela: dentro da célula, sem margens laterais. */
td .tss-found-slot { margin: .3rem 0 0; }

/* ── Sugestões da barra de busca ───────────────────────────────── */

.tss-has-suggest { position: relative; }
.tss-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	margin-top: 4px;
	padding: .4rem;
	background: #fff;
	color: var(--tss-text);
	border: 1px solid var(--tss-border);
	border-radius: var(--tss-radius);
	box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
	text-align: left;
	font-size: .875rem;
}
.tss-suggest.tss--tainacan,
.tss-suggest.tss--blocksy { background: var(--tss-surface); }
.tss-suggest[hidden] { display: none !important; }
.tss-suggest__seg {
	padding: .35rem .5rem .15rem;
	font-size: .7em;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tss-muted);
}
.tss-suggest__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .4rem .55rem;
	border-radius: calc(var(--tss-radius) - 2px);
	color: var(--tss-ink);
	text-decoration: none;
	cursor: pointer;
}
.tss-suggest__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tss-suggest__row small { flex-shrink: 0; font-size: .78em; color: var(--tss-muted); }
.tss-suggest__row:hover,
.tss-suggest__row.is-active { background: var(--tss-soft); color: var(--tss-accent-strong); text-decoration: none; }
.tss-suggest__all { margin-top: .25rem; border-top: 1px solid var(--tss-border); border-radius: 0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.tss__seg { transition: none; }
}
@media (max-width: 600px) {
	.tss { padding: .75rem; }
	.tss__actions { width: 100%; }
}