/* ===========================================================================
   lg-trainer — the vocabulary trainer in the list sheet's design
   ---------------------------------------------------------------------------
   The question is the vocabulary list sheet's (_app/vocabulary-sheet.php):
   lg.vocab-sheet.css, lg.exercise-mc.css and lg.exercise-text.css style it,
   loaded by _app/trainer.php before this file. Here only what the trainer has
   and the sheet does not: one word at a time filled in by js/trainer2.js, the
   letter box keeping its input through the verdict, the one-language
   trainer's long texts, and the page around it.

     .panel.lg-trainer-panel
       .trainer_left
         #result                       out-of-band messages (a.css)
         #trainer.lg-trainer           .lg-vocab-sheet + both panel classes
           .exercise-box.lg-vocab-q    head, options | letter box, recap slot
         (audio settings, error report)
       .trainer_right                  statistics and lists - for now under it
   =========================================================================== */

/* --- The page: no frame, one column ------------------------------------------
   a.css draws .panel as a white card with a 5px grey border, and puts the
   statistics beside the trainer at 33%. The sheet has neither, so the frame
   goes, and the statistics move under the trainer until their new place is
   decided. */
.panel.lg-trainer-panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.lg-trainer-panel .trainer_left,
.lg-trainer-panel .trainer_right {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.lg-trainer-panel .trainer_right {
	margin-top: 3rem;
}

/* A word list open in place of the trainer (html.lg-list-on, trainer2.js
   bindListView): the head is the list's then, so the trainer's direction
   and settings menus go, and so do the intro and the phone's statistics
   bar, which open nothing while the columns are hidden. */
html.lg-list-on .lg-exercise-head__actions,
html.lg-list-on .lg-trainer-intro,
html.lg-list-on .lg-trainer-bar {
	display: none;
}

/* --- Statistics -------------------------------------------------------------
   The right column in the cards' design: the trainer cards' gold bar
   (lg.trainer-modes.css, .lg-mode__progress) for today, all time and the
   words practised, then "My lists" as tiles that carry their counts.

     section#stats.lg-trainer-stats       hidden by a.css until the first answer
       .lg-trainer-stats__grid
         .lg-trainer-stat x3              label + %, bar, "12 attempts"
     section.lg-trainer-lists
       .lg-trainer-lists__grid
         button.lg-trainer-list x4        icon, label, count (+ lock)

   Same column as the question, so the page reads as one stack. */
.lg-trainer-stats,
.lg-trainer-lists {
	max-width: var(--lg-column-max);
	margin: 0 auto 2rem;
	font-family: var(--lg-font);
}

.lg-trainer-stats__title {
	margin: 0 0 1rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-trainer-stats__grid,
.lg-trainer-lists__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem;
}

/* The figures are one flat, tinted panel - the previous-word box's surface
   (lg.vocab-sheet.css, .lg-vocab-recap) - and not cards of their own. A white
   box with a border and a shadow is what this page clicks: the options, the
   list tiles below. Information that cannot be clicked must not look like
   that, so the figures share one quiet surface with no edge to press. */
.lg-trainer-stats .lg-trainer-stats__grid {
	gap: 1.25rem 2.5rem;
	padding: 1.2rem 1.4rem;
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface-alt);
}

/* White rather than the hairline grey: on the tint the grey track would
   all but disappear into the panel. White alone is too close to the tint as
   well, so an inset hairline draws its edge - inset, so it adds no height
   and the gold fill (painted over it) still runs edge to edge. 12px, not
   the cards' 7px: in the panel the bar is the figure, not a detail. */
.lg-trainer-stats .lg-trainer-stat__track {
	height: 12px;
	background-color: var(--lg-surface);
	box-shadow: inset 0 0 0 1px var(--lg-border), inset 0 1px 2px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
}

.lg-trainer-stat__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}

.lg-trainer-stat__label {
	color: var(--lg-text-muted);
}

.lg-trainer-stat__value {
	color: var(--lg-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lg-trainer-stat__track {
	display: block;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--lg-score-ring-track);
}

.lg-trainer-stat__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background-color: var(--lg-score);
	transition: width 0.4s ease;
}

.lg-trainer-stat__count {
	display: block;
	margin-top: 0.6rem;
	color: var(--lg-text-muted);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

/* The numbers in it. a.css set #stats_attempts and #stats_words to 600 by
   id, but not today's attempts, which came out lighter than the other two. */
.lg-trainer-stat__count > span {
	font-weight: 600;
}

/* "1,140 more words with Lingua Premium" - trainer2.js renderResult() shows it. */
.lg-trainer-stats .premium-ad {
	margin-top: 1rem;
}

.lg-trainer-lists__beta {
	margin-left: 0.2rem;
	color: var(--lg-red);
	font-family: var(--lg-font);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	vertical-align: super;
}

/* A list tile: icon and label on the left, the count big on the right. A
   grid, so a long label ("Dernière bonne réponse") wraps under itself and
   never pushes the count off the tile. */
.lg-trainer-list {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: 0 2px 6px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.05);
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lg-trainer-list[hidden] {
	display: none;
}

.lg-trainer-list:hover {
	border-color: var(--lg-border-strong);
	background-color: var(--lg-bg);
}

.lg-trainer-list:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: 2px;
}

.lg-trainer-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
}

.lg-trainer-list__icon svg {
	width: 1.2rem;
	height: 1.2rem;
}

.lg-trainer-list__label {
	font-weight: 600;
	line-height: 1.3;
}

.lg-trainer-list__count {
	font-family: var(--lg-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	position:relative;
	top:-1px;
}

/* Guests and basic members: the tile opens the upsell. The count stays
   readable - it is what makes the list worth opening - and a small padlock
   in the corner says why it does not open. */
.lg-trainer-list.is-locked .lg-trainer-list__icon,
.lg-trainer-list.is-locked .lg-trainer-list__label {
	opacity: 0.7;
}

.lg-trainer-list__lock {
	position: absolute;
	top: 0.45rem;
	right: 0.5rem;
	display: inline-flex;
	color: var(--lg-text-muted);
}

.lg-trainer-list__lock svg {
	width: 0.8rem;
	height: 0.8rem;
}

/* --- Statistics bar (phones) -------------------------------------------------
   Below 650px the bottom navigation gives way to this bar (footer.php skips
   it for $lg_bottom_nav_off), and the statistics column above becomes a sheet
   the bar's chart button opens - over the page and just above the bar, so the
   button that opened it closes it again. From 650px the header has its menu
   back, the bar goes, and the column is on the page as before: the same edge
   as lg.bottom-nav.css.

     .lg-trainer-scrim                     the dimmed page, a close target
     .lg-trainer-bar
       .lg-trainer-bar__inner
         .lg-trainer-bar__today            Today, ⟳ 43, gold bar, 84%
         button.lg-trainer-bar__toggle     chart + chevron
     .trainer_right.lg-trainer-sheet       the column, opened by
                                           body.lg-trainer-stats-open

   Same height as the navigation it replaces (--lg-bottom-nav-height), so the
   body's padding for it in lg.bottom-nav.css fits this bar too. */
.lg-trainer-bar,
.lg-trainer-scrim,
.lg-trainer-sheet__head {
	display: none;
}

@media (max-width: 649.98px) {

	/* No site header and footer (contact, terms ...) while training on a
	   phone - the same as a list sheet's html.lg-exercise-on
	   (lg.vocab-sheet.css). Set by _app/trainer.php with the bar.
	   --lg-header-offset (the sticky exercise head's top) is an inline style
	   on <html> from includes/header.php, hence the !important. */
	html.lg-trainer-on .header,
	html.lg-trainer-on .footer {
		display: none;
	}

	html.lg-trainer-on {
		--lg-header-offset: 0px !important;
	}

	.lg-trainer-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5;
		display: block;
		border-top: 1px solid var(--lg-border);
		background-color: var(--lg-surface);
		box-shadow: 0 -2px 10px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.07);
		font-family: var(--lg-font);
	}

	/* A tap anywhere on the bar opens the sheet (data-trainer-stats-toggle). */
	.lg-trainer-bar {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Today's figures in the middle of the room the button leaves, not of
	   the whole bar - centred on the bar they look pushed to the left. */
	.lg-trainer-bar__inner {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		max-width: 40rem;
		min-height: var(--lg-bottom-nav-height);
		margin: 0 auto;
		padding: 0 0.6rem env(safe-area-inset-bottom, 0px);
	}

	.lg-trainer-bar__today {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-width: 0;
		font-size: 0.95rem;
	}

	.lg-trainer-bar__label {
		color: var(--lg-text-muted);
	}

	.lg-trainer-bar__attempts {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		color: var(--lg-text);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.lg-trainer-bar__attempts svg {
		width: 0.8rem;
		height: 0.8rem;
		color: var(--lg-text-muted);
	}

	/* A width of its own now that nothing stretches it; it gives way on a
	   narrow phone before the numbers do. */
	.lg-trainer-bar__track {
		flex: 0 1 8rem;
		width: 8rem;
		min-width: 2.5rem;
	}

	.lg-trainer-bar__value {
		color: var(--lg-text);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* A 44px target, like every slot of the navigation it stands in for. */
	.lg-trainer-bar__toggle {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		min-width: 44px;
		min-height: 44px;
		padding: 0 0.5rem;
		border: 0;
		border-radius: 999px;
		background: none;
		color: var(--lg-text-muted);
		cursor: pointer;
	}

	.lg-trainer-bar__toggle:focus-visible {
		outline: 2px solid var(--lg-red);
		outline-offset: 2px;
	}

	.lg-trainer-bar__toggle svg {
		width: 1.35rem;
		height: 1.35rem;
	}

	.lg-trainer-bar__toggle .lg-trainer-bar__chevron {
		width: 1rem;
		height: 1rem;
		transition: transform 0.2s ease;
	}

	.lg-trainer-stats-open .lg-trainer-bar__toggle {
		color: var(--lg-text);
	}

	.lg-trainer-stats-open .lg-trainer-bar__chevron {
		transform: rotate(180deg);
	}

	/* The sheet. Off screen below the bar while closed, rather than
	   display:none, so it can slide up; visibility takes it out of the tab
	   order and the accessibility tree meanwhile. */
	.lg-trainer-panel .trainer_right.lg-trainer-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--lg-bottom-nav-height) + 1px + env(safe-area-inset-bottom, 0px));
		z-index: 4;
		max-height: 75vh;
		margin: 0;
		padding: 0.65rem 1.1rem 0.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: var(--lg-radius-card) var(--lg-radius-card) 0 0;
		background-color: var(--lg-surface);
		box-shadow: 0 -8px 30px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.18);
		visibility: hidden;
		transform: translateY(calc(100% + var(--lg-bottom-nav-height)));
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.lg-trainer-stats-open .lg-trainer-panel .trainer_right.lg-trainer-sheet {
		visibility: visible;
		transform: none;
	}

	/* The page behind does not scroll while the sheet is open. */
	body.lg-trainer-stats-open {
		overflow: hidden;
	}

	.lg-trainer-scrim {
		position: fixed;
		inset: 0;
		z-index: 3;
		display: block;
		background-color: rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.35);
	}

	.lg-trainer-scrim[hidden] {
		display: none;
	}

	/* The grab bar (it does nothing - the shape says "this came up from the
	   bottom") and a close button, as on the navigation's More sheet. */
	.lg-trainer-sheet__head {
		position: relative;
		display: block;
		min-height: 2.4rem;
		margin-bottom: 0.25rem;
	}

	.lg-trainer-sheet__handle {
		width: 2.5rem;
		height: 0.25rem;
		margin: 0 auto;
		border-radius: 999px;
		background-color: var(--lg-border);
	}

	.lg-trainer-sheet__close {
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--lg-surface-alt);
		color: var(--lg-text-muted);
		cursor: pointer;
	}

	.lg-trainer-sheet__close svg {
		width: 1.1rem;
		height: 1.1rem;
	}

	.lg-trainer-sheet .lg-trainer-stats,
	.lg-trainer-sheet .lg-trainer-lists {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 649.98px) and (prefers-reduced-motion: reduce) {

	.lg-trainer-panel .trainer_right.lg-trainer-sheet,
	.lg-trainer-bar__toggle .lg-trainer-bar__chevron {
		transition: none;
	}
}

/* The question in the sheet's measure, centred - its stepped view is capped
   the same way (lg.exercise-mc.css, #questions). */
.lg-trainer {
	max-width: var(--lg-column-max);
	margin: 0 auto;
	padding: 2.5rem 0 1rem;
}

.lg-trainer .exercise-box.lg-vocab-q {
	margin-bottom: 0;
}

@media (max-width: 576px) {

	.lg-trainer {
		margin: 0 auto;
		padding: 0rem 1rem 1rem 1rem;
	}

	/* The word list in its place (components/VocabularyList) needs the same
	   sides: a.css pulls .panel out by 1rem at this width to make up for its
	   padding, which .lg-trainer-panel has none of - so the list's filters,
	   text and table ran to the screen's edge. */
	.lg-trainer-panel vocabulary-list {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* --- The head ---------------------------------------------------------------
   The play button's slot: empty on active questions and for a language
   without recordings, and then it must not leave a gap beside the word. */
.lg-trainer__play {
	display: inline-flex;
}

.lg-trainer__play:empty {
	display: none;
}

/* One-language trainer: one flag and what to do, instead of two flags. */
.lg-trainer__prompt {
	color: var(--lg-text-muted);
	font-size: var(--lg-font-size-sm);
	line-height: 1.5rem;
}

/* "Without a mouse: keys 1 to 6" under the options - where there is a
   keyboard to use. */
.lg-trainer__keys {
	display: none;
	margin: 1.4rem 0 0;
	color: var(--lg-text-muted);
	font-size: var(--lg-font-size-sm);
	text-align: center;
}

/* The small keyboard in front, in the coral of the other page marks. */
.lg-trainer__keys-icon {
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.45em;
	color: var(--lg-red);
	vertical-align: -0.2em;
}

@media (min-width: 650px) and (hover: hover) and (pointer: fine) {
	.lg-trainer__keys {
		display: block;
	}
}

/* --- The letter box through the verdict ------------------------------------
   On the sheet the input is replaced by the result. Here it stays - with its
   value and its focus, so a phone keeps its keyboard up - and only its text
   goes transparent, while #trainer_result is drawn over it in the same cells
   (trainer2.js paintTextFeedback()). Same origin and line height as the
   input, so every letter lands on the one it replaces. */
.lg-trainer .lg-letters__track .lg-letters__result {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	pointer-events: none;
}

.lg-trainer .lg-letters.is-correct .lg-letters__result,
.lg-trainer .lg-letters.is-wrong .lg-letters__result {
	display: flex;
}

.lg-vocab-sheet.lg-trainer .lg-vocab-q__entry .lg-letters.is-correct .lg-letters__input,
.lg-vocab-sheet.lg-trainer .lg-vocab-q__entry .lg-letters.is-wrong .lg-letters__input {
	color: transparent;
	caret-color: transparent;
}

/* --- From one word to the next ----------------------------------------------
   trainer2.js _advanceToNextWord(): .is-switching fades what changes out -
   the word, the cells or the options' text, the verdict - the next word goes
   in, and the class comes off again to fade it back in, instead of everything
   changing on one frame.

   Meanwhile the letter box eases to the new length. Its width is
   calc(var(--n) * var(--cell)), and a custom property only animates once the
   browser knows its type - the @property --n in lg.vocab-sheet.css, which
   the list sheet glides the same way. Where @property is not supported the
   box simply jumps, as before. */
.lg-vocab-sheet.lg-trainer .lg-gap.lg-letters {
	transition: --n 0.3s ease, border-color 0.15s ease, background-color 0.2s ease, box-shadow 0.15s ease;
}

/* Only what changes from one word to the next fades: the word with its play
   button, the example and "Noun · A1" - the flags stay, the direction is the
   same for every word - and the options' TEXT; the option cards themselves
   stay on screen (trainer2.js renderMcOptions() puts the text in
   .lg-trainer__option-text). The tick / cross disc of a verdict fades with it. */
.lg-trainer .lg-vocab-q__title,
.lg-trainer .lg-vocab-q__example,
.lg-trainer .lg-vocab-q__meta,
.lg-trainer .lg-letters__cells,
.lg-trainer .lg-letters__result,
.lg-trainer .lg-trainer__option-text,
.lg-trainer .answers .answer::before {
	transition: opacity 0.18s ease;
}

/* The mark keeps the sheet's colour and scale transitions (lg.vocab-sheet.css). */
.lg-trainer .lg-letters__mark {
	transition: opacity 0.18s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* .answer keeps its own transitions (lg.exercise-mc.css) next to the fade. */
.lg-vocab-sheet.lg-trainer.panel-exercise-mc .answers .answer {
	transition: opacity 0.18s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.lg-trainer.is-switching .lg-vocab-q__title,
.lg-trainer.is-switching .lg-vocab-q__example,
.lg-trainer.is-switching .lg-vocab-q__meta,
.lg-trainer.is-switching .lg-letters__cells,
.lg-trainer.is-switching .lg-letters__result,
.lg-trainer.is-switching .lg-letters__mark,
.lg-trainer.is-switching .lg-trainer__option-text,
.lg-trainer.is-switching .answers .answer::before {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

	.lg-vocab-sheet.lg-trainer .lg-gap.lg-letters,
	.lg-trainer .lg-vocab-q__title,
	.lg-trainer .lg-vocab-q__example,
	.lg-trainer .lg-vocab-q__meta,
	.lg-trainer .lg-letters__cells,
	.lg-trainer .lg-letters__result,
	.lg-trainer .lg-letters__mark,
	.lg-trainer .lg-trainer__option-text,
	.lg-trainer .answers .answer::before,
	.lg-vocab-sheet.lg-trainer.panel-exercise-mc .answers .answer {
		transition: none;
	}
}

/* --- One-language trainer: definitions, not words --------------------------
   Active: the prompt is a definition - a sentence, not a word, so it is set
   as text rather than at the word's size. Passive: the options are the
   definitions, one per row, at reading size. */
.lg-vocab-sheet.lg-trainer--mono.lg-trainer--active_mc .lg-vocab-q__head .lg-vocab-q__word {
	max-width: 36rem;
	font-size: clamp(1.2rem, 2.6vw, 1.55rem);
	font-weight: 600;
	line-height: 1.4;
}

.lg-vocab-sheet.lg-trainer--mono.lg-trainer--passive .answers-row {
	grid-template-columns: minmax(0, 1fr);
}

.lg-vocab-sheet.lg-trainer--mono.lg-trainer--passive.panel-exercise-mc .answer {
	min-height: 0;
	border-radius: var(--lg-radius-card);
	font-size: 1rem;
	line-height: 1.45;
}