/* ===========================================================================
   lg-exercise — the bar above a single exercise
   ---------------------------------------------------------------------------
   A sheet now has the screen to itself. This is the only chrome on it: where
   you are, how far through you are, and the way back.

   Deliberately thin. The topic page sells the topic; by the time someone is
   here they have chosen, and everything that is not the question is in the
   way — which is the whole reason the sheet stopped being printed underneath
   the topic text.

   STRUCTURE

     .lg-exercise-head
       a.lg-exercise-head__back        <  back to the topic
       .lg-exercise-head__titles
         .lg-exercise-head__topic      PRESENT TENSE
         .lg-exercise-head__name       Usage  + level badge

     .lg-exercise-progress
       .lg-exercise-progress__label    Simple vs. continuous
       .lg-exercise-progress__count    Question 2 of 10
       .lg-exercise-progress__steps
         span ×n                       one segment per question

   Category-agnostic: a dictation or a reading comprehension has the same
   shape — a parent, a name, a position in a sequence.
   =========================================================================== */

/* --- The bar ------------------------------------------------------------ */
/* A second bar under the site header, and it stays there.

   WHY STICKY

   It is the only way back to the topic from a sheet, and a sheet is long: ten
   questions, and then a result screen with two lists under it. Scrolled off
   the top, the way out is a page-length scroll away, and the learner who wants
   it is by definition the one who does not want to keep reading. It also
   answers "where am I" at any point, which on a screen with no other chrome is
   worth the 3rem it costs.

   It holds on the result screen too, and that needs nothing extra: the result
   is prepended INTO #exercise (grammar_v2.js), which is this bar's next
   sibling, so both sit in the same container and the sticky range covers the
   whole of it.

   TOP, AND WHY IT IS A VARIABLE

   .header is position:sticky; top:0 (a.css:70), and it has no fixed height -
   the logo changes at five breakpoints and an alert bar can grow it further.
   includes/header.php measures the real offsetHeight into --lg-header-offset
   and keeps it up to date on resize; lg.core.css declares the fallback and
   already uses it for scroll-padding-top. Sitting this bar on the same token
   means the two can never drift apart.

   z-index 5 puts it under the header's 6 and over everything in the page,
   which is what "below the header" has to mean in the stacking order as well
   as on the screen.

   The background is not decoration. A sticky bar with a transparent ground
   shows the questions travelling through its text. --lg-bg is what .container
   is painted in, so the bar is invisible until something scrolls under it. */
.lg-exercise-head {
	position: sticky;
	top: var(--lg-header-offset);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 0 1rem;
	border-bottom: 1px solid var(--lg-border);
	background-color: var(--lg-bg);
}

/* --- Back --------------------------------------------------------------- */
/* A chevron on its own, not "« alle Übungen". At this size the word is the
   only thing that would wrap, and the destination is one tap away and
   obvious. The label is still there for a screen reader. */
.lg-exercise-head__back {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: -0.5rem;
	border-radius: 50%;
	color: var(--lg-text-muted);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lg-exercise-head__back:hover {
	background-color: var(--lg-surface-alt);
	color: var(--lg-text);
	text-decoration: none;
}

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

.lg-exercise-head__back svg {
	width: 1.3rem;
	height: 1.3rem;
}

/* --- The view switch ---------------------------------------------------- */
/* One question at a time, or the whole sheet. Right-hand end of the bar.

   margin-left:auto rather than justify-content:space-between on the bar: the
   back chevron and the titles have to stay together on the left, and
   space-between would push the titles into the middle as soon as this appeared.
   An auto margin moves only this one element.

   Quiet on purpose. It is a preference, not a task - the sheet in front of the
   learner is the task - so it takes the muted text and no fill until it is
   pointed at.

   flex:0 0 auto and nowrap, because the titles beside it are the thing that
   should give way: a long topic name truncates (it has the ellipsis), and this
   two-word label does not wrap to a second line and make the bar taller. */
.lg-exercise-head__view {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lg-exercise-head__view:hover {
	background-color: var(--lg-surface-alt);
	color: var(--lg-text);
	text-decoration: none;
}

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

.lg-exercise-head__view svg {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
}

/* Desktop only. On a phone the whole-sheet view is ten questions on one page -
   not a choice worth offering, and not worth the room in a bar that is already
   tight enough to be dropping the topic line at this width. */
@media (max-width: 900px) {

	.lg-exercise-head__view {
		display: none;
	}
}

/* --- Titles ------------------------------------------------------------- */
.lg-exercise-head__titles {
	min-width: 0;
}

/* The topic, above the sheet. Upper case and letterspaced so it reads as a
   location rather than as a second title. */
.lg-exercise-head__topic {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lg-exercise-head__name {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
}

.lg-exercise-head__name-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Progress
   --------------------------------------------------------------------------- */

.lg-exercise-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.4rem 1rem;
	padding: 1.6rem 0 0;
}

.lg-exercise-progress__label {
	min-width: 0;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lg-exercise-progress__count {
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* One segment per question rather than a single bar.

   A bar answers "how far along", which a counter already says in words. The
   segments answer "how much is left" at a glance and give each answer a
   visible click of progress — on a ten-question sheet that is ten small
   rewards instead of one slow creep. */
.lg-exercise-progress__steps {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.lg-exercise-progress__step {
	flex: 1 1 0;
	height: 7px;
	min-width: 8px;
	border-radius: 999px;
	background-color: var(--lg-surface-alt);
	transition: background-color 0.2s ease;
}

/* Coral, not gold. Gold is the SCORE — how well you did. This is position in
   a sequence, which is not an achievement and should not look like one; a
   wrong answer still fills its segment. */
.lg-exercise-progress__step--done {
	background-color: var(--lg-red);
}

/* The one being answered now. */
.lg-exercise-progress__step--current {
	background-color: var(--lg-red);
	opacity: 0.45;
}

/* --- Narrow ------------------------------------------------------------- */
@media (max-width: 560px) {

	.lg-exercise-head {
		padding: 0.7rem 0 0.8rem;
	}

	.lg-exercise-head__name {
		font-size: 1.05rem;
	}

	/* The counter drops under the label: "Question 10 of 10" beside a long
	   section name leaves neither enough room on a phone. */
	.lg-exercise-progress {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 1.2rem;
	}

	.lg-exercise-progress__count {
		grid-column: 1;
	}

	/* Segments stay full width and just get thinner — the point of them is
	   the count, and ten of them still read at 4px. */
	.lg-exercise-progress__steps {
		gap: 0.3rem;
	}
}