/* Dagens ord – guess, then reveal (word-feature-card on /dagens-ord/, word-card on the home page). */
.tv-wg {
	--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-gold: var(--e-global-color-accent, #e2b42c);
	--tv-soft-gold: var(--e-global-color-722ed5d, #efd686);
	--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);
	--tv-gold-tint: var(--e-global-color-f4d3a01, #fff4d3);
	margin: 0;
	color: var(--tv-navy);
	font-family: "Open Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	text-align: left;
}
.tv-wg p, .tv-wg ul { margin: 0; padding: 0; }
.tv-wg li { margin: 0; list-style: none; }

/* ---- feature card: grid ---- */
.tv-wg__grid { display: grid; gap: 2rem; }
.tv-wg__class { font: 600 .875rem/1.25rem "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tv-steel); }
.tv-wg .tv-wg__word { margin-top: .75rem; font: 600 4.5rem/1 "Outfit", sans-serif; color: var(--tv-navy); text-wrap: pretty; }
.tv-wg .tv-wg__note { max-width: 24rem; margin-top: 1.5rem; color: color-mix(in srgb, var(--tv-ink) 60%, transparent); }
.tv-wg .tv-wg__question { display: inline; margin: 0; font: 600 1.5rem/2rem "Outfit", sans-serif; vertical-align: baseline; color: var(--tv-navy); }

/* ---- textarea ---- */
.tv-wg .tv-wg__input {
	display: inline-block;
	width: 100%;
	margin: 1rem 0 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 15%, transparent);
	background: var(--tv-cream);
	color: var(--tv-navy);
	font: 400 1rem/1.5rem "Open Sans", sans-serif;
	letter-spacing: normal;
	outline: none;
	box-shadow: none;
	vertical-align: baseline;
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.tv-wg--feature .tv-wg__input { min-height: 11rem; padding: 1.25rem; border-radius: 14px; resize: vertical; }
.tv-wg--card .tv-wg__input { min-height: 7rem; margin-top: 0; padding: 1rem; border-radius: 6px; resize: none; }
.tv-wg .tv-wg__input::placeholder { color: color-mix(in oklab, var(--tv-navy) 35%, transparent); opacity: 1; }
.tv-wg .tv-wg__input:focus, .tv-wg .tv-wg__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-wg input[hidden] { display: none; }

/* ---- button (BrandButton) ---- */
.tv-wg .tv-wg__button {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	border: 0;
	border-radius: 6px;
	padding: .75rem 1.5rem;
	font: 600 1rem/1.5rem "Outfit", sans-serif;
	white-space: normal;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.tv-wg .tv-wg__button:hover { transform: translateY(-.125rem); }
.tv-wg .tv-wg__button:focus { box-shadow: none; }
.tv-wg .tv-wg__button:focus-visible { outline: 2px solid var(--tv-bright); outline-offset: 4px; box-shadow: none; }
/* --tv-button-bg / --tv-button-text: set from the widget's Style tab (empty = gold or steel as in the design). */
.tv-wg .tv-wg__button--gold, .tv-wg .tv-wg__button--gold:focus { background: var(--tv-button-bg, var(--tv-gold)); color: var(--tv-button-text, var(--tv-navy)); }
.tv-wg .tv-wg__button--gold:hover { background: var(--tv-soft-gold); color: var(--tv-button-text, var(--tv-navy)); }
.tv-wg .tv-wg__button--steel, .tv-wg .tv-wg__button--steel:focus { background: var(--tv-button-bg, var(--tv-steel)); color: var(--tv-button-text, var(--tv-cream)); }
.tv-wg .tv-wg__button--steel:hover { background: var(--tv-bright); color: var(--tv-button-text, var(--tv-cream)); }

/* ---- reveal: the same 500 ms grid-rows + opacity transition as Lovable ---- */
.tv-wg__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.tv-wg__clip { min-height: 0; overflow: hidden; }
.tv-wg--feature.is-revealed .tv-wg__reveal { margin-top: 2.5rem; grid-template-rows: 1fr; opacity: 1; }
.tv-wg--card.is-revealed .tv-wg__reveal { margin-top: 1.5rem; grid-template-rows: 1fr; opacity: 1; }

.tv-wg__panel { border-top: 1px solid color-mix(in oklab, var(--tv-navy) 10%, transparent); padding-top: 2rem; }
.tv-wg__panel-grid { display: grid; gap: 1.75rem; }
.tv-wg__yours { border-radius: 14px; padding: 1.25rem; background: var(--tv-blue-tint); }
.tv-wg .tv-wg__yours-label { font-size: .75rem; font-weight: 600; line-height: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tv-steel); }
.tv-wg .tv-wg__yours-text { margin-top: .5rem; line-height: 1.625; color: color-mix(in srgb, var(--tv-ink) 75%, transparent); }
.tv-wg .tv-wg__uses { font: 600 1.25rem/1.75rem "Outfit", sans-serif; color: var(--tv-navy); }
.tv-wg .tv-wg__explanation { margin-top: .75rem; line-height: 1.625; color: color-mix(in srgb, var(--tv-ink) 70%, transparent); }
.tv-wg .tv-wg__examples { margin-top: 1.25rem; border-left: 2px solid var(--tv-gold); padding-left: 1.25rem; font-style: italic; color: color-mix(in srgb, var(--tv-ink) 75%, transparent); }
.tv-wg .tv-wg__examples li + li { margin-top: .5rem; }

/* home card answer box */
.tv-wg__box { border-left: 2px solid var(--tv-gold); padding: 1.25rem; background: var(--tv-gold-tint); }
.tv-wg .tv-wg__check { display: flex; align-items: center; gap: .5rem; font-family: "Outfit", sans-serif; font-weight: 600; color: var(--tv-navy); }
.tv-wg .tv-wg__check svg { flex-shrink: 0; }
.tv-wg .tv-wg__answer { margin-top: .5rem; font-size: 1rem; line-height: 1.625; color: color-mix(in srgb, var(--tv-ink) 70%, transparent); }

@media (min-width: 640px) {
	.tv-wg .tv-wg__word { font-size: 6rem; }
}
@media (min-width: 1024px) {
	.tv-wg__grid { grid-template-columns: .72fr 1.28fr; gap: 3.5rem; }
	.tv-wg .tv-wg__word { font-size: 8rem; }
	.tv-wg__panel-grid { grid-template-columns: .8fr 1.2fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tv-wg__reveal, .tv-wg .tv-wg__button { transition: none; }
}