/*
 * Talasvenska chapter widgets: shared tokens, question fields (exercise pages + chapter test), review list,
 * gold button. Ported from src/styles.css (exercise-*, review-*, chapter-label) of the Lovable design.
 * Hello Elementor styles every button, input and select; every selector here is scoped and fully reset.
 */
.tv-ch {
	--tvc-navy: var(--e-global-color-primary, #051644);
	--tvc-steel: var(--e-global-color-secondary, #2d6ca9);
	--tvc-bright: var(--e-global-color-b1a8e7f, #44a8e7);
	--tvc-gold: var(--e-global-color-accent, #e2b42c);
	--tvc-soft-gold: var(--e-global-color-722ed5d, #efd686);
	--tvc-cream: var(--e-global-color-e33c8be, #fcfaf6);
	--tvc-blue-tint: var(--e-global-color-a24cbff, #e8f5fd);
	--tvc-gold-tint: var(--e-global-color-f4d3a01, #fff4d3);
	--tvc-shadow-soft: 0 12px 32px color-mix(in oklab, var(--tvc-navy) 8%, transparent);
	--tvc-shadow-layered: 0 20px 58px color-mix(in oklab, var(--tvc-navy) 10%, transparent), 0 3px 10px color-mix(in oklab, var(--tvc-navy) 5%, transparent);
	color: var(--tvc-navy);
	font-family: "Open Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: 0;
}
.tv-ch *, .tv-ch *::before, .tv-ch *::after { box-sizing: border-box; }
.tv-ch :where(h1, h2, h3, p, ol, ul, li, blockquote, figure) { margin: 0; padding: 0; }
.tv-ch :where(h1, h2, h3) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-wrap: pretty; }
.tv-ch p { text-wrap: pretty; }
.tv-ch :where(ol, ul) { list-style: none; }
.tv-ch :where(a) { color: inherit; text-decoration: none; }
.tv-ch svg { display: block; flex-shrink: 0; }
.tv-ch [hidden] { display: none !important; }
.tv-ch button, .tv-ch input, .tv-ch select {
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-align: inherit;
	white-space: normal;
}
.tv-ch button { cursor: pointer; }
.tv-ch button:disabled { cursor: default; }
.tv-ch button:focus-visible, .tv-ch a:focus-visible, .tv-ch select:focus-visible { outline: 2px solid var(--tvc-bright); outline-offset: 2px; }
.tv-ml-auto { margin-left: auto; }

/* ---------------------------------------------------------------- shared type */
.tv-chapter-label { font-family: "Bebas Neue", sans-serif; font-size: 1.05rem; letter-spacing: .08em; color: var(--tvc-steel); }
.tv-section-kicker { font-family: "Outfit", sans-serif; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--tvc-steel); }

/* Gold button (BrandButton variant gold). */
.tv-ch .tv-btn-gold {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	padding: .75rem 1.5rem;
	background: var(--tvc-gold);
	color: var(--tvc-navy);
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	transition: background-color .3s ease, transform .3s ease;
}
.tv-ch .tv-btn-gold svg { margin-left: .5rem; }
.tv-ch .tv-btn-gold:hover:not(:disabled) { background: var(--tvc-soft-gold); color: var(--tvc-navy); transform: translateY(-2px); }
.tv-ch .tv-btn-gold:disabled { cursor: not-allowed; opacity: .45; }

/* ---------------------------------------------------------------- exercise card and questions */
.tv-ex-card { border: 1px solid color-mix(in oklab, var(--tvc-navy) 7%, transparent); border-radius: 20px; padding: clamp(1rem, 3.5vw, 2.5rem); background: color-mix(in oklab, var(--tvc-cream) 92%, var(--tvc-blue-tint)); box-shadow: var(--tvc-shadow-soft); }
.tv-ex-list { display: grid; gap: 1.25rem; }
.tv-ex-question { border: 1px solid color-mix(in oklab, var(--tvc-navy) 8%, transparent); border-radius: 16px; padding: clamp(1.15rem, 3vw, 2rem); background: var(--tvc-cream); transition: border-color .2s ease, background-color .2s ease; }
.tv-ex-question-retry { border-color: color-mix(in oklab, var(--tvc-gold) 42%, transparent); background: var(--tvc-gold-tint); }
.tv-ex-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.tv-ex-q-type { margin-bottom: .5rem !important; font-family: "Outfit", sans-serif; font-size: .75rem; font-weight: 600; line-height: 1rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tvc-steel); }
.tv-ex-q-prompt { font-family: "Outfit", sans-serif; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.375 !important; color: var(--tvc-navy); }
.tv-ex-done-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 999px; background: var(--tvc-steel); color: var(--tvc-cream); }
.tv-ex-q-retry { margin-top: 1rem !important; font-size: .875rem; font-weight: 600; line-height: 1.25rem; color: rgba(14, 35, 56, .65); }

.tv-ex-choices { display: grid; gap: .75rem; }
.tv-ch .tv-ex-choice { display: flex; min-height: 5rem; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid color-mix(in oklab, var(--tvc-navy) 14%, transparent); border-radius: 12px; padding: 1rem; background: var(--tvc-cream); color: var(--tvc-navy); text-align: left; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.tv-ch .tv-ex-choice:hover:not(:disabled) { border-color: var(--tvc-steel); background: var(--tvc-cream); color: var(--tvc-navy); transform: translateY(-1px); }
.tv-ch .tv-ex-choice.tv-ex-choice-selected, .tv-ch .tv-ex-choice.tv-ex-choice-selected:is(:hover, :focus):not(:disabled) { border-color: var(--tvc-steel); background: var(--tvc-blue-tint); box-shadow: inset 0 0 0 1px var(--tvc-steel); }
.tv-ch .tv-ex-answer-done { border-color: color-mix(in oklab, var(--tvc-steel) 38%, transparent) !important; background: color-mix(in oklab, var(--tvc-blue-tint) 62%, var(--tvc-cream)) !important; color: var(--tvc-navy) !important; }

.tv-ex-sentence { display: flex; min-height: 4.5rem; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0; border: 1px solid color-mix(in oklab, var(--tvc-navy) 11%, transparent); border-radius: 12px; padding: 1rem 1.15rem; background: var(--tvc-cream); font-family: "Outfit", sans-serif; font-size: 1.15rem; font-weight: 500; line-height: 1.7; cursor: text; }
.tv-ch .tv-ex-sentence input { min-width: 8rem; max-width: 14rem; height: auto; flex: 1; border: 0; border-bottom: 2px solid var(--tvc-steel); border-radius: 0; padding: .35rem .15rem; background: transparent; outline: none; line-height: 1.7; }
.tv-ch .tv-ex-sentence input:focus { border-color: var(--tvc-steel); box-shadow: none; }

.tv-ex-order-target { display: flex; min-height: 5rem; flex-wrap: wrap; align-items: center; gap: .55rem; border: 1px dashed color-mix(in oklab, var(--tvc-steel) 50%, transparent); border-radius: 12px; padding: .9rem; background: var(--tvc-blue-tint); color: rgba(14, 35, 56, .5); }
.tv-ex-order-pool { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.tv-ch .tv-ex-word { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .3rem; border: 1px solid color-mix(in oklab, var(--tvc-steel) 32%, transparent); border-radius: 8px; padding: .45rem .75rem; background: var(--tvc-cream); color: var(--tvc-navy); font-weight: 600; box-shadow: 0 3px 8px color-mix(in oklab, var(--tvc-navy) 5%, transparent); }
.tv-ch .tv-ex-word:hover:not(:disabled) { background: var(--tvc-cream); color: var(--tvc-navy); }
.tv-ch .tv-ex-word.tv-ex-word-available, .tv-ch .tv-ex-word.tv-ex-word-available:hover:not(:disabled) { background: var(--tvc-soft-gold); }

.tv-ex-passage { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border-radius: 12px; padding: 1rem; background: var(--tvc-blue-tint); font-size: 1.05rem; line-height: 2.1; }
.tv-ch .tv-ex-passage button { min-height: 2.5rem; border-radius: 6px; padding: 0 .25rem; background: transparent; color: var(--tvc-navy); line-height: 2.1; }
.tv-ch .tv-ex-passage button:hover:not(:disabled) { background: transparent; color: var(--tvc-navy); }
.tv-ch .tv-ex-passage button.tv-ex-mark-selected, .tv-ch .tv-ex-passage button.tv-ex-mark-selected:hover { padding: 0 .55rem; background: var(--tvc-steel); color: var(--tvc-cream); }

.tv-ex-matches { display: grid; gap: .75rem; }
.tv-ex-match-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; min-height: 4.5rem; align-items: center; gap: .7rem; margin: 0; border: 1px solid color-mix(in oklab, var(--tvc-navy) 10%, transparent); border-radius: 12px; padding: .75rem 1rem; background: var(--tvc-cream); font-weight: 400; line-height: 1.7; vertical-align: baseline; }
.tv-ex-match-arrow { color: var(--tvc-steel); }
.tv-ch .tv-ex-match-row select { min-height: 2.75rem; min-width: 0; width: auto; border: 1px solid color-mix(in oklab, var(--tvc-navy) 14%, transparent); border-radius: 8px; padding: 0 .7rem; background: var(--tvc-blue-tint); color: var(--tvc-navy); font-size: 17px; line-height: 1.7; appearance: auto; }

.tv-ex-save-error { margin-top: 1.5rem !important; border-radius: 12px; padding: .8rem 1rem !important; background: var(--tvc-gold-tint); color: var(--tvc-navy); font-size: .875rem; font-weight: 600; line-height: 1.25rem; }
.tv-ex-footer { display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; border-top: 1px solid color-mix(in oklab, var(--tvc-navy) 10%, transparent); padding-top: 1.75rem; }
.tv-ex-footer > span { font-size: .875rem; line-height: 1.25rem; color: rgba(14, 35, 56, .5); }
.tv-ex-footer .tv-btn-gold { width: 100%; }

/* ---------------------------------------------------------------- review list (genomgång, test result) */
.tv-review-list > li { padding-block: 2.25rem; border-top: 1px solid color-mix(in oklab, var(--tvc-navy) 10%, transparent); }
.tv-review-list > li:first-child { border-top: 0; }
@media (min-width: 640px) { .tv-review-list-page > li { padding-block: 2.75rem; } }
.tv-review-num { font-family: "Bebas Neue", sans-serif; font-size: 1.25rem; line-height: 1.75rem; color: var(--tvc-steel); }
.tv-review-prompt { margin-top: .5rem !important; font-family: "Outfit", sans-serif; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.375 !important; color: var(--tvc-navy); }
.tv-review-answer { display: flex; width: fit-content; max-width: 100%; align-items: flex-start; gap: .7rem; margin-top: 1.25rem; border-radius: 10px; padding: .8rem 1rem; background: var(--tvc-blue-tint); color: var(--tvc-steel); }
.tv-review-answer svg { margin-top: .35rem; }
.tv-review-answer strong { color: var(--tvc-navy); font-weight: 700; }
.tv-review-explanation { max-width: 64ch; margin-top: 1.25rem !important; line-height: 2rem; color: rgba(14, 35, 56, .7); }
.tv-review-example { margin-top: 1.25rem !important; border-left: 2px solid var(--tvc-gold); padding-left: 1.25rem !important; font-family: "Outfit", sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.625; color: var(--tvc-navy); }

@media (min-width: 640px) {
	.tv-ex-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tv-ex-q-prompt, .tv-review-prompt { font-size: 1.5rem !important; }
	.tv-ex-footer { flex-direction: row; }
	.tv-ex-footer .tv-btn-gold { width: auto; }
}
@media (max-width: 640px) {
	.tv-ex-match-row { grid-template-columns: 1fr auto; }
	.tv-ex-match-row > .tv-ex-match-arrow { display: none; }
	.tv-ch .tv-ex-match-row select { grid-column: 1 / -1; width: 100%; }
}