/* ===========================================================================
   lg-topic-intro — the head of a single topic page
   ---------------------------------------------------------------------------
   The band above the sheet list. Not lg-section-header: that one heads a whole
   CATEGORY and carries a score card in an aside, this one heads one topic and
   carries its progress inline. They share the button and the badge from
   lg.core.css and nothing else.

   Category-agnostic, like everything else in the layer: a reading topic, a
   listening topic and a vocabulary list all have a name, a description, a
   completion figure and a "carry on here" button.

   STRUCTURE

     .lg-topic-intro
       a.lg-topic-intro__back          ← All grammar topics
       .lg-topic-intro__tags           Verbs · Beginner · 9 sheets
       h1.lg-topic-intro__title        Present Tense
       .lg-topic-intro__lead           what the topic is about
       .lg-topic-intro__progress       bar · 51% · 1 of 9 sheets completed
       .lg-topic-intro__actions
         a.lg-btn--primary             Continue — Usage →
         .lg-topic-intro__explain      <details> Erklärung zum Thema
   =========================================================================== */

.lg-topic-intro {
	padding: 2rem 0 2.5rem;
}

/* --- Back link ---------------------------------------------------------- */
/* Above the title, not beside it: it is the way out of a page someone landed
   on from a catalogue, and it should be the first thing read, not a
   decoration hanging off the heading. */
.lg-topic-intro__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	text-decoration: none;
}

.lg-topic-intro__back:hover {
	color: var(--lg-text);
	text-decoration: none;
}

/* The chevron is drawn now, not typed, so it needs a size of its own - an
   <svg> with no width defaults to 300x150, not to the text around it.

   In em rather than rem, unlike the exercise head's fixed 1.3rem: there the
   chevron is the whole control and sets its own scale, here it is a mark
   beside a 0.95rem label and has to track it. 1.15em lands a shade above the
   cap height, which is where an arrow reads as pointing AT the words rather
   than sitting under them.

   flex:0 0 auto so a long label in German wraps on its own and never squeezes
   the chevron into an ellipse. The stroke takes currentColor, so it picks up
   the hover above for free. */
.lg-topic-intro__back svg {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

/* --- Tags --------------------------------------------------------------- */
.lg-topic-intro__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.9rem;
}

/* --- Title and lead ----------------------------------------------------- */
.lg-topic-intro__title {
	margin: 0 0 0.9rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Wider than the 52ch of the category lead: this one is explanatory rather
   than a hook, and breaking three sentences over six short lines reads as a
   list of fragments. */
.lg-topic-intro__lead {
	margin: 0 0 1.5rem;
	max-width: 68ch;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.6;
}

.lg-topic-intro__lead p { margin: 0; }
.lg-topic-intro__lead p + p { margin-top: 0.7rem; }

/* --- Progress ----------------------------------------------------------- */
.lg-topic-intro__progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	margin-bottom: 1.6rem;
}

.lg-topic-intro__track {
	flex: 0 0 auto;
	display: block;
	width: 20rem;
	max-width: 100%;
	height: 8px;
	border-radius: 999px;
	background-color: var(--lg-score-track);
	overflow: hidden;
}

.lg-topic-intro__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--lg-score);
	min-width: 3px;
}

.lg-topic-intro__percent {
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lg-topic-intro__count {
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

/* --- Actions ------------------------------------------------------------ */
.lg-topic-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
}

/* --- The explanation ---------------------------------------------------- */
/* <details>, not the checkbox trick used elsewhere in this layer. The topic
   explanation is long-form prose that belongs in the document outline and
   should be findable by the browser's own in-page search even while closed,
   which is what <details> gives and a display:none sibling does not.

   It is also the one disclosure here whose contents are indexable content
   rather than a UI convenience, so the semantic element is worth the slightly
   less controllable styling. */
.lg-topic-intro__explain {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.lg-topic-intro__explain > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--lg-border);
	border-radius: 999px;
	background-color: var(--lg-surface);
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari draws its own triangle through a pseudo-element the standard
   list-style rule does not reach. */
.lg-topic-intro__explain > summary::-webkit-details-marker {
	display: none;
}

.lg-topic-intro__explain > summary:hover {
	background-color: var(--lg-bg);
	border-color: var(--lg-border-strong);
}

.lg-topic-intro__explain-icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	color: var(--lg-score-text);
}

.lg-topic-intro__explain-chevron {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	transition: transform 0.2s ease;
}

.lg-topic-intro__explain[open] > summary .lg-topic-intro__explain-chevron {
	transform: rotate(180deg);
}

.lg-topic-intro__explain-body {
	margin-top: 1rem;
	padding: 1.15rem 1.3rem;
	max-width: 68ch;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: 1.6;
}

.lg-topic-intro__explain-body p { margin: 0; }
.lg-topic-intro__explain-body p + p { margin-top: 0.8rem; }

/* ===========================================================================
   lg-explain — the explanation document inside the panel
   ---------------------------------------------------------------------------
   Rendered by lg_topic_explanation() from the stored JSON. Its own block
   rather than more __explain-body descendants, because the same document
   will be wanted on a print page and in the app, where the <details> wrapper
   is not there.
   =========================================================================== */

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

.lg-explain__intro {
	margin: 0 0 1.5rem;
	color: var(--lg-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* A hairline between sections, but not above the first - the intro already
   separates it from the heading. */
.lg-explain__section + .lg-explain__section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lg-border);
}

.lg-explain__heading {
	margin: 0 0 0.5rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.lg-explain__body {
	margin: 0 0 0.9rem;
	color: var(--lg-text-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* --- Examples ----------------------------------------------------------- */
.lg-explain__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

/* Each example is a tinted bar: the sentence is the thing being shown, and a
   plain bulleted list buries it in the prose around it. */
.lg-explain__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.7rem;
	padding: 0.6rem 0.9rem;
	border-radius: var(--lg-radius);
	background-color: var(--lg-bg);
}

.lg-explain__text {
	color: var(--lg-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

/* The annotation. Lighter and smaller than the sentence, because it explains
   the sentence rather than competing with it. */
.lg-explain__note {
	color: var(--lg-text-muted);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.45;
}

/* --- Tips --------------------------------------------------------------- */
/* Gold, the progress colour, not coral. A tip is something worth keeping, not
   a warning - coral on this page already means "do this" and "premium". */
.lg-explain__item--tip {
	background-color: var(--lg-score-track);
}

.lg-explain__item--tip .lg-explain__text {
	color: var(--lg-score-text);
	font-weight: 500;
}

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

	.lg-topic-intro {
		padding: 1.5rem 0 2rem;
	}

	.lg-topic-intro__track {
		width: 100%;
	}

	/* The CTA is the point of the page on a phone; the explanation can take
	   its own line under it rather than competing for the same one. */
	.lg-topic-intro__actions > .lg-btn,
	.lg-topic-intro__explain > summary {
		width: 100%;
		justify-content: center;
	}
}