/* Classes that only occur inside field HTML (letter grids, drills, charts, tables, games).
   Studio emits a registry style only where it is linked to a block, and these classes
   never sit on a block, so their CSS lives here instead. Nesting compiled from the
   registry entries of the same names. */

.lt-letters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: var(--grid-gap);
margin: 0;
padding: 0;
list-style: none;

& li {
	display: grid;
	gap: 2px;
	padding: var(--space-xs);
	text-align: center;
	background: var(--bg-ultra-light);
	border: 1px solid var(--base-light);
	border-radius: var(--radius);
}

& b {
	--lt-thai-size: var(--text-xl);
	font-weight: 600;
	color: var(--primary-semi-dark);
}

.lt-letters__name {
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark-muted);
}

.lt-letters__gloss {
	font-size: var(--text-xs);
	color: var(--text-dark-muted);
}

/* Class decides the tone, so it is labelled, never conveyed by colour alone. */
.lt-letters__class {
	justify-self: center;
	padding-inline: var(--space-xs);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--primary-ultra-light);
	background: var(--primary-semi-dark);
	border-radius: var(--radius);
}
}

.lt-drill {
display: grid;
gap: var(--space-m);

.lt-drill__list {
	display: grid;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: drill;
}

.lt-drill__q {
	display: grid;
	gap: var(--space-xs);
	padding: var(--space-s);
	background: var(--bg-ultra-light);
	border: 1px solid var(--base-light);
	border-radius: var(--radius);
	counter-increment: drill;
}

.lt-drill__ask {
	margin: 0;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--text-dark-muted);

	&::before { content: counter(drill) ". "; }
}

.lt-drill__prompt {
	--lt-thai-size: var(--text-xl);
	margin: 0;
	font-weight: 600;
	color: var(--primary-semi-dark);
}

.lt-drill__opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;

	& button {
		inline-size: 100%;
		padding: var(--space-xs);
		font: inherit;
		font-size: var(--text-s);
		font-weight: 600;
		color: var(--text-dark);
		background: var(--neutral-ultra-light);
		border: 1px solid var(--base-light);
		border-radius: var(--radius);
		cursor: pointer;
		transition: background var(--transition-duration) ease-out,
			border-color var(--transition-duration) ease-out;

		&:hover:not([disabled]) { border-color: var(--primary-semi-dark); }

		/* State is a data attribute, and the mark is TEXT as well as colour so it
		   survives greyscale and colour-blindness. */
		&[data-state="correct"] {
			color: var(--success-dark);
			background: var(--success-ultra-light);
			border-color: var(--success-dark);

			&::after { content: "  correct"; font-weight: 400; }
		}

		&[data-state="wrong"] {
			color: var(--danger-dark);
			background: var(--danger-ultra-light);
			border-color: var(--danger-dark);

			&::after { content: "  not this one"; font-weight: 400; }
		}
	}
}

.lt-drill__explain {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark-muted);

	&[hidden] { display: none; }
}

.lt-drill__score {
	margin: 0;
	padding: var(--space-s);
	font-weight: 600;
	background: var(--primary-ultra-light);
	border-radius: var(--radius);

	&:empty { display: none; }
}
}

.lt-table {
overflow-x: auto;
border: 1px solid var(--base-light);
border-radius: var(--radius);

& table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--text-s);
}

& :is(th, td) {
	padding: var(--space-xs);
	text-align: start;
	border-block-end: 1px solid var(--base-light);
	white-space: nowrap;
}

/* A cell holds two different kinds of content and they want opposite rules.
   Thai script, romanisation and a two-word gloss are labels: nowrap above is
   right for them, because a Thai word broken across lines is unreadable. A
   .lt-table__note is a sentence, and it was inheriting that nowrap — the class
   had no rule of its own anywhere in the registry, on any page. Measured on
   /learn/thai-pronouns/: one note cell 1,197px wide, the table scrolling to
   1,382px against a 331px body, so the reader had to drag sideways through
   every explanatory sentence on the site. Notes get their own line and wrap. */
& .lt-table__note {
	display: block;
	max-inline-size: 52ch;
	margin-block-start: var(--space-xs);
	white-space: normal;
	font-size: var(--text-xs);
	color: var(--text-dark-muted);
}

& th {
	font-weight: 600;
	background: var(--bg-ultra-light);
	color: var(--text-dark);
}

& tbody tr:last-child :is(th, td) { border-block-end: 0; }

/* The row header is the consonant class: it identifies the row, so it stays
   visually anchored while the tone columns scroll. */
& tbody th {
	position: sticky;
	inset-inline-start: 0;
	background: var(--bg-ultra-light);
}
}

.lt-chart {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
gap: var(--space-xs);
margin: 0;
padding: 0;
list-style: none;

& li {
	display: grid;
	gap: 0;
	padding: var(--space-xs);
	text-align: center;
	background: var(--bg-ultra-light);
	border: 1px solid var(--base-light);
	border-radius: var(--radius);
}

/* Obsolete letters are shown (they appear in old print) but visibly retired. */
& li[data-obsolete="true"] {
	opacity: 0.62;
	border-style: dashed;
}

& b {
	--lt-thai-size: var(--text-l);
	font-weight: 600;
	color: var(--primary-semi-dark);
}

.lt-chart__name {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-dark-muted);
}

.lt-chart__gloss {
	font-size: var(--text-xs);
	color: var(--text-dark-muted);
}
}

.lt-game {
display: block;
padding: var(--space-m);
background: var(--bg-light);
border: 1px solid var(--base-light);
border-radius: var(--radius);
/* The engine swaps innerHTML wholesale between questions. Without a floor the
   card collapses and re-expands on every answer, and the page jumps under the
   thumb of someone who is about to tap the next option. */
min-block-size: 22rem;

/* --- running header --- */
.lt-game__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block-end: var(--space-xs);
	border-block-end: 1px solid var(--base-light);
}
.lt-game__progress {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-dark-muted);
}
.lt-game__clock {
	margin: 0;
	font-size: var(--text-s);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--primary-dark);
}

/* --- the question --- */
.lt-game__q { padding-block-start: var(--space-s); }
.lt-game__ask {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.lt-game__ask--sub { margin-block-start: var(--space-s); }
.lt-game__prompt {
	margin: 0 0 var(--space-s);
	font-size: var(--h4);
	line-height: 1.5;
}
.lt-game__gloss,
.lt-game__en {
	display: block;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
	margin-block-start: .15em;
}
.lt-game__en { color: var(--text-dark); }

/* --- options --- */
.lt-game__opts,
.lt-game__pieces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}
.lt-game__opts { grid-template-columns: minmax(0, 1fr); }
.lt-game__pieces {
	grid-template-columns: repeat(auto-fit, minmax(4.5rem, auto));
	justify-content: start;
	margin-block-start: var(--space-s);
}

.lt-game__opts button,
.lt-game__piece {
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--space-xs) var(--space-s);
	font: inherit;
	text-align: start;
	color: var(--bg-ultra-light-text);
	background: var(--bg-ultra-light);
	border: 1px solid var(--base-light);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color var(--transition-duration) ease-out,
		background var(--transition-duration) ease-out;

	&:hover:not(:disabled) { border-color: var(--primary-dark); }
	&:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
	&:disabled { cursor: default; }
}
.lt-game__piece { inline-size: auto; text-align: center; }

/* Right and wrong are marked with a border weight and a label as well as a
   colour, so the two states are still distinguishable without colour vision. */
/* Colour is NOT overridden here. The --success/--danger scales have no
   "-text" auto-contrast companion the way the --bg-* scales do, and inventing
   one is exactly the kind of made-up token that has broken this site's dark
   mode before. The inherited --bg-ultra-light-text already clears both tints:
   in light mode it is near-black on a 0.96 tint, in dark mode near-white on a
   0.2 tint. */
/* --success-dark and --danger-dark, NOT --success and --danger. The undecorated
   tokens are the same lightness in both schemes, so a single value cannot clear
   the threshold against both an off-white card and a near-black one — measured
   3.44:1 light and 2.41:1 dark. The -dark tokens are light-dark() pairs and
   measure above 8:1 in both. This is the same trap that put every link on the
   site below contrast when --link-color defaulted to --primary. */
.lt-game__opts button[data-state="correct"] {
	border-color: var(--success-dark);
	border-inline-start-width: 4px;
	background: var(--success-ultra-light);
}
.lt-game__opts button[data-state="wrong"] {
	border-color: var(--danger-dark);
	border-inline-start-width: 4px;
	background: var(--danger-ultra-light);
}

/* --- tap-to-build --- */
.lt-game__answerline {
	min-block-size: 3.2rem;
	margin: 0;
	padding: var(--space-xs) var(--space-s);
	font-size: var(--h5);
	background: var(--bg-ultra-light);
	border: 1px dashed var(--base);
	border-radius: var(--radius);
}
.lt-game__placeholder { font-size: var(--text-s); color: var(--text-dark-muted); }
.lt-game__tapctl {
	display: flex;
	gap: var(--space-xs);
	margin-block-start: var(--space-s);
}
.lt-game__undo,
.lt-game__check {
	min-block-size: 44px;
	padding-inline: var(--space-m);
	font: inherit;
	font-weight: 600;
	border-radius: var(--radius);
	cursor: pointer;
	&:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
}
.lt-game__undo {
	color: var(--text-dark);
	background: none;
	border: 1px solid var(--base);
}
.lt-game__check {
	color: var(--bg-ultra-light);
	background: var(--primary-dark);
	border: 0;
	&:disabled { opacity: .45; cursor: default; }
	&:hover:not(:disabled) { background: var(--primary-ultra-dark); }
}

/* --- controls --- */
.lt-game__play {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-block-size: 44px;
	margin-block-end: var(--space-s);
	padding-inline: var(--space-m);
	font: inherit;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--bg-ultra-light);
	background: var(--primary-dark);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	&:hover { background: var(--primary-ultra-dark); }
	&:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
}

/* --- feedback --- */
.lt-game__feedback {
	margin-block-start: var(--space-m);
	padding-block-start: var(--space-s);
	border-block-start: 1px solid var(--base-light);
}
.lt-game__verdict {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-s);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	/* See the note on the option states: the plain --success / --danger tokens
	   do not hold contrast in both schemes, and this line is text. */
	&[data-ok="1"] { color: var(--success-dark); }
	&[data-ok="0"] { color: var(--danger-dark); }
}
.lt-game__why {
	margin: 0 0 var(--space-s);
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.lt-game__answer {
	padding: var(--space-s);
	font-size: var(--h5);
	background: var(--bg-ultra-light);
	border-radius: var(--radius);
}
.lt-game__ctx {
	display: inline-block;
	margin-block-start: var(--space-xs);
	font-size: var(--text-s);
}
.lt-game__next,
.lt-game__again,
.lt-game__go {
	min-block-size: 44px;
	margin-block-start: var(--space-s);
	padding-inline: var(--space-l);
	font: inherit;
	font-weight: 600;
	color: var(--bg-ultra-light);
	background: var(--primary-dark);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	&:hover { background: var(--primary-ultra-dark); }
	&:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
}

/* --- start and end --- */
.lt-game__intro,
.lt-game__end { display: flex; flex-direction: column; align-items: start; justify-content: center; min-block-size: 18rem; }
.lt-game__blurb { margin: 0; font-size: var(--text-m); color: var(--text-dark-muted); }
.lt-game__endscore {
	margin: 0;
	font-size: var(--h2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.lt-game__endpct { margin: var(--space-xs) 0 0; color: var(--text-dark-muted); }
.lt-game__best { margin: var(--space-xs) 0 0; font-weight: 600; color: var(--primary-dark); }
.lt-game__note { margin: var(--space-s) 0 0; font-size: var(--text-xs); color: var(--text-dark-muted); max-inline-size: 44ch; }
.lt-game__loading, .lt-game__error { margin: 0; color: var(--text-dark-muted); }

@media (width < 30rem) {
	padding: var(--space-s);
	.lt-game__pieces { grid-template-columns: repeat(auto-fit, minmax(3.5rem, auto)); }
}
}