/* Ordarkivet: search + filters (sticky bar) and the word list (archive-* classes in the Lovable design). */
.tv-wa, .tv-wa-filter {
	--tv-navy: var(--e-global-color-primary, #051644);
	--tv-ink: #0e2338; /* muted text = this colour at 45-75 % (the home page convention) */
	--tv-steel: var(--e-global-color-secondary, #2d6ca9);
	--tv-cream: var(--e-global-color-e33c8be, #fcfaf6);
	--tv-blue-tint: var(--e-global-color-a24cbff, #e8f5fd);
	--tv-bright: var(--e-global-color-b1a8e7f, #44a8e7);
	color: var(--tv-navy);
	font-family: "Open Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
}
.tv-wa p, .tv-wa h2, .tv-wa h3 { margin: 0; padding: 0; }

/* ---- filter bar ---- */
.tv-wa-search { position: relative; display: block; margin: 0; line-height: inherit; }
.tv-wa-search svg { position: absolute; top: 50%; left: 1rem; color: var(--tv-steel); transform: translateY(-50%); pointer-events: none; }
.tv-wa-filter .tv-wa-search input {
	display: block;
	width: 100%;
	min-height: 3.5rem;
	margin: 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 15%, transparent);
	border-radius: 14px;
	padding: .75rem 1rem .75rem 3rem;
	background: var(--tv-cream);
	color: var(--tv-navy);
	font: inherit;
	outline: none;
	box-shadow: none;
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.tv-wa-filter .tv-wa-search input::placeholder { color: color-mix(in oklab, var(--tv-navy) 50%, transparent); opacity: 1; }
.tv-wa-filter .tv-wa-search input:focus, .tv-wa-filter .tv-wa-search input:focus-visible { border-color: color-mix(in oklab, var(--tv-navy) 15%, transparent); outline: none; box-shadow: 0 0 0 2px var(--tv-bright); }

.tv-wa-row { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.tv-wa-alphabet { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
.tv-wa-alphabet::-webkit-scrollbar { display: none; }
.tv-wa-filter .tv-wa-alphabet button {
	display: grid;
	flex: 0 0 auto;
	min-width: 2.35rem;
	height: 2.35rem;
	place-items: center;
	margin: 0;
	border: 0;
	border-radius: 7px;
	padding: 0;
	background: transparent;
	color: color-mix(in oklab, var(--tv-navy) 62%, transparent);
	font: 600 .85rem/1.7 "Outfit", sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.tv-wa-filter .tv-wa-alphabet button:hover,
.tv-wa-filter .tv-wa-alphabet button.is-active { background: var(--tv-steel); color: var(--tv-cream); }
.tv-wa-filter .tv-wa-alphabet button:focus { box-shadow: none; }
.tv-wa-filter .tv-wa-alphabet button:focus-visible { outline: 2px solid var(--tv-bright); outline-offset: 2px; box-shadow: none; }

.tv-wa-class { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; margin: 0; color: color-mix(in srgb, var(--tv-ink) 60%, transparent); font-size: .875rem; font-weight: 600; line-height: 1.25rem; vertical-align: baseline; }
.tv-wa-filter .tv-wa-class select {
	display: block;
	width: auto;
	min-height: 2.75rem;
	margin: 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 15%, transparent);
	border-radius: 6px;
	padding: 0 .75rem;
	background-color: var(--tv-cream);
	color: var(--tv-navy);
	font: inherit;
	line-height: normal;
	outline: none;
	box-shadow: none;
	cursor: pointer;
}
.tv-wa-filter .tv-wa-class select:focus { box-shadow: 0 0 0 2px var(--tv-bright); }

/* ---- list ---- */
.tv-wa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.tv-wa .tv-wa-count { font: 600 1.5rem/2rem "Outfit", sans-serif; color: var(--tv-navy); }
.tv-wa .tv-wa-page { font-size: .875rem; line-height: 1.25rem; color: color-mix(in srgb, var(--tv-ink) 45%, transparent); }

.tv-wa-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .8rem; }
.tv-wa [hidden] { display: none !important; }
.tv-wa .tv-wa-card {
	display: flex;
	min-height: 13rem;
	flex-direction: column;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 9%, transparent);
	border-radius: 20px;
	padding: 1.25rem;
	background: var(--tv-cream);
	color: var(--tv-navy);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tv-wa .tv-wa-card:hover { border-color: color-mix(in oklab, var(--tv-steel) 45%, transparent); color: var(--tv-navy); transform: translateY(-2px); box-shadow: 0 12px 32px color-mix(in oklab, var(--tv-navy) 8%, transparent); }
.tv-wa-meta { font-size: .75rem; line-height: 1rem; color: color-mix(in srgb, var(--tv-ink) 45%, transparent); }
.tv-wa .tv-wa-word { margin-top: .5rem; font: 600 1.5rem/2rem "Outfit", sans-serif; color: var(--tv-navy); }
.tv-wa .tv-wa-gloss { margin-top: .5rem; font-size: .875rem; line-height: 1.625; color: color-mix(in srgb, var(--tv-ink) 60%, transparent); }
.tv-wa-more { display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; font-size: .75rem; font-weight: 600; line-height: 1rem; color: var(--tv-steel); }

.tv-wa-empty { border-radius: 20px; padding: 3rem 1.5rem; background: var(--tv-blue-tint); text-align: center; }
.tv-wa .tv-wa-empty h2 { font: 600 1.5rem/2rem "Outfit", sans-serif; color: var(--tv-navy); }
.tv-wa .tv-wa-empty p { margin-top: .5rem; color: color-mix(in srgb, var(--tv-ink) 60%, transparent); }

.tv-wa-pages { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.tv-wa-numbers { display: contents; }
.tv-wa .tv-wa-page-btn {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	margin: 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 14%, transparent);
	border-radius: 8px;
	padding: 0;
	background: transparent;
	color: var(--tv-navy);
	font: 600 17px/1.7 "Outfit", sans-serif;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.tv-wa .tv-wa-page-btn:hover:not(:disabled), .tv-wa .tv-wa-page-btn.is-current { border-color: var(--tv-steel); background: var(--tv-steel); color: var(--tv-cream); }
.tv-wa .tv-wa-page-btn:disabled { cursor: not-allowed; opacity: .3; }
.tv-wa .tv-wa-page-btn:focus { box-shadow: none; }
.tv-wa .tv-wa-page-btn:focus-visible { outline: 2px solid var(--tv-bright); outline-offset: 2px; }

@media (min-width: 768px) {
	.tv-wa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.tv-wa-row { flex-direction: row; align-items: center; justify-content: space-between; }
	.tv-wa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}