/* ===========================================================================
   lg-score-card — "<Category> Score" panel
   ---------------------------------------------------------------------------
   Category-agnostic. Grammar passes "Grammar Score", reading passes "Reading
   Score"; the component knows about a percentage, a subtitle, up to three
   stat pairs and one action link, and nothing else.

   STRUCTURE

     .lg-score-card
       input.lg-score-card__switch  hidden, drives the info panel
       .lg-score-card__head
         .lg-score-card__ring       svg donut, percentage in the middle
         .lg-score-card__heading
           .lg-score-card__title    Grammar Score  (+ the (i) label)
           .lg-score-card__subtitle Englisch
       .lg-score-card__stats
         .lg-score-card__stat  ×2   label over value
       .lg-score-card__note         what the score means, hidden until (i)
       .lg-score-card__foot
         .lg-btn                    Zum Lingua Score & Statistiken

   THE RING

   An inline SVG, not a conic-gradient and not an image.

     - conic-gradient cannot round the cap of the arc, and the blunt end reads
       as a rendering fault at small sizes.
     - an image cannot carry a value that changes per user.

   The arc is one circle with stroke-dasharray set to the circumference and
   stroke-dashoffset carrying the percentage; the PHP side computes the offset.
   Rotated -90deg so 0% starts at twelve o'clock rather than three.

   COLOUR

   Gold, not coral. On a ring red reads as "wrong", and this measures progress,
   not a grade — every learner starts near zero. Coral also already means "do
   this" (the CTA, the premium button), so spending it here would weaken it.
   The tokens carry the reasoning and the contrast figures.
   =========================================================================== */

.lg-score-card {
	/* Contains the absolutely positioned .lg-score-card__switch, so the hidden
	   input cannot scroll the page when it takes focus. */
	position: relative;
	padding: 1.6rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: 0 10px 30px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.10);
	font-family: var(--lg-font);
}

/* --- Head: ring + title ------------------------------------------------- */
.lg-score-card__head {
	display: flex;
	align-items: center;
	gap: 1.15rem;
}

.lg-score-card__ring {
	position: relative;
	flex: 0 0 auto;
	width: 104px;
	height: 104px;
}

.lg-score-card__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	/* 0% at the top. transform-box:fill-box keeps the origin on the graphic
	   rather than the SVG viewport, which is what Safari uses. */
	transform: rotate(-90deg);
	transform-box: fill-box;
	transform-origin: center;
}

.lg-score-card__ring-track {
	fill: none;
	stroke: var(--lg-score-ring-track);
	stroke-width: 12;
}

/* 12 in a 100 viewBox on r=43: the stroke is ~12% of the ring's outer
   diameter, which is what makes it read as a band rather than a hairline.
   Both circles must carry the same width or the arc sits inside the track.

   CHANGING THIS MEANS CHANGING $radius in _components/lg-score-card.php. The
   stroke straddles the radius, so r + stroke/2 must stay under 50 or the ring
   is clipped by the viewBox on all four sides. */
.lg-score-card__ring-arc {
	fill: none;
	stroke: var(--lg-score);
	stroke-width: 12;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.6s ease;
}

/* The number sits in the hole, outside the rotated SVG so it stays upright. */
.lg-score-card__ring-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.lg-score-card__heading {
	min-width: 0;
}

.lg-score-card__title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.2rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
}

.lg-score-card__subtitle {
	margin: 0;
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.35;
}

/* --- Info disclosure ---------------------------------------------------- */
/* The (i) opens a short explanation INSIDE the card, between the stats and
   the action. Not a title= tooltip, which the previous version used: a
   tooltip cannot be read on a touch screen at all, and this text is the
   answer to the one question the card reliably provokes.

   Same checkbox-and-label mechanism as the suggestions toggle, for the same
   reasons - it works before any script loads and survives a JS error
   elsewhere on the page. The input is the card's first child because CSS
   sibling selectors only look forwards; the label can sit anywhere, since it
   is bound by for=. */
.lg-score-card__switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.lg-score-card__info {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lg-text-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}

.lg-score-card__info:hover {
	color: var(--lg-text);
}

.lg-score-card__info svg {
	width: 100%;
	height: 100%;
}

/* A <label> is not focusable, so the keyboard ring has to come from the input
   it controls - without this the tab stop is invisible. */
.lg-score-card__switch:focus-visible ~ .lg-score-card__head .lg-score-card__info {
	outline: 2px solid var(--lg-red);
	outline-offset: 3px;
	border-radius: 50%;
}

/* Open: the icon stops being a hint and becomes the way back. */
.lg-score-card__switch:checked ~ .lg-score-card__head .lg-score-card__info {
	color: var(--lg-text);
}

/* --- The note itself ---------------------------------------------------- */
/* Tinted panel rather than plain text: it appears and disappears, and a block
   of prose that shares the card background would look like content that had
   always been there and had simply been missed. */
.lg-score-card__note {
	margin-top: 1.2rem;
	padding: 0.95rem 1.05rem;
	border-radius: var(--lg-radius);
	background-color: var(--lg-bg);
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.lg-score-card__note p {
	margin: 0;
}

.lg-score-card__note p + p {
	margin-top: 0.6rem;
}

.lg-score-card__switch:not(:checked) ~ .lg-score-card__note {
	display: none;
}

/* --- Stats -------------------------------------------------------------- */
/* auto-fit here, and it must stay auto-fit - the opposite of the card grids
   in lg.topics.css and lg.suggestions.css.

   The minimum is 0, so the browser lays out as many tracks as the gap alone
   allows - around two dozen in a 380px card. auto-fit collapses the empty
   ones and the two stats end up as two equal halves, which is the intent.
   auto-fill would keep all two dozen and each stat would render a few pixels
   wide. The rule only works because the track minimum is 0; do not copy this
   pattern to a grid with a real minimum. */
.lg-score-card__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--lg-border);
}

.lg-score-card__stat {
	min-width: 0;
}

.lg-score-card__stat-label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--lg-text-muted);
	font-size: 0.9rem;
	line-height: 1.3;
}

/* Tabular figures so "12 of 52" and "3.220 of 14.900" line up on their digits
   and do not jitter as the numbers change. */
.lg-score-card__stat-value {
	display: block;
	color: var(--lg-text);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* --- Foot --------------------------------------------------------------- */
.lg-score-card__foot {
	margin-top: 1.3rem;
}

/* ---------------------------------------------------------------------------
   Zero state

   A learner who has done nothing gets a 0% ring, which is honest but bleak.
   The card stays, the ring stays, and the copy under it changes — that is the
   caller's job, not this file's. All that changes here is the arc, which at
   0% would otherwise render a single round dot at twelve o'clock from the
   line cap.
   --------------------------------------------------------------------------- */
.lg-score-card--empty .lg-score-card__ring-arc {
	display: none;
}

/* --- Nothing scored yet -------------------------------------------------- */
/* A card with no data behind it: nothing completed, so the ring is at zero and
   both figures read "0 of n". It is still rendered, and on a desktop it stays.

   WHY IT STAYS ON A DESKTOP. .lg-section-header is a two-column grid,
   1fr + 380px. Without a card the second column is not narrower, it is empty -
   the renderer's --full modifier collapses it, but then the headline and the
   lead stretch across the whole band and the page looks like a different page
   depending on whether you have used it. A card with nothing in it yet is a
   better answer than a void or a reflow.

   WHY IT GOES ON A PHONE. Below 900px the grid is one column and the aside
   stacks BETWEEN the buttons and the rest of the page. There the card is not
   filling spare space, it is spending a screenful of it - and what it spends it
   on is a ring at 0% over "0 of 43", which is the one reader who least needs a
   progress report.

   THE ASIDE, NOT THE CARD. Hiding only the card would leave the aside as an
   empty grid item, and the header's 2rem row gap falls between items whether or
   not they have any height. display:none on the item removes it from the grid
   and takes the gap with it. Same reasoning as the empty card foot in
   lg.texts.css.

   900px is the breakpoint the header itself changes at - see
   lg.section-header.css - so this switches exactly when the card stops being a
   column and starts being a block. One number, two files, and they have to
   agree.

   Where :has() is unsupported the selector is dropped and the card shows on a
   phone too, which is the behaviour this replaces rather than a broken one. */
@media (max-width: 900px) {

	.lg-section-header__aside:has(.lg-score-card--nodata) {
		display: none;
	}
}

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

	.lg-score-card {
		padding: 1.25rem;
	}

	.lg-score-card__ring {
		width: 84px;
		height: 84px;
	}

	.lg-score-card__ring-value {
		font-size: 1.45rem;
	}
}