/* ===========================================================================
   lg-result — the end of a sheet
   ---------------------------------------------------------------------------
   Replaces the summary modal. The cards under it are .lg-card--wide, which
   lives in lg.suggestions.css - this file styles only the head card and the
   two sections around them.
   =========================================================================== */

/* One measured column, centred, for every box on the screen: the head card,
   CONTINUE WITH and MORE FOR YOU all sit inside this and inherit the cap.

   The cap is --lg-column-max, shared with the one question on screen while a
   sheet is being worked through - see .lg-exercise--stepped #questions in
   lg.exercise-mc.css. The result is rendered into that same panel when the
   last answer lands, so a column that changed width at that moment would read
   as the page jumping rather than as the work moving on. Change it in
   tokens.css and both follow.

   NO PADDING, in either direction, and both halves of that are deliberate.

   Vertical: the result sits directly under the exercise head, and 1.5rem of
   its own on top of the head's 1rem left the card floating away from the bar
   that names the sheet it belongs to. The 3rem at the bottom was doing even
   less - the page ends there.

   Horizontal: the boxes are meant to come out AT the cap, so there is nothing
   to subtract from it - a side gutter here would leave them narrower than the
   question they replace. Below 748px the cap stops applying and the column
   runs edge to edge; if that wants a gutter on a phone, the question wants the
   same one, which makes .container the place for it rather than here. */
.lg-result {
	max-width: var(--lg-column-max);
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

/* --- The head card ------------------------------------------------------ */
/* Two columns: the verdict, and the Grammar Score panel. The actions run under
   both, which is why this is a grid and not a flex row.

   It was three - a ring for the sheet, the verdict, the score - and the sheet
   ring is gone: see "TWO SCORES, TWO SHAPES" in _components/lg-result.php. The
   verdict now owns the sheet's figure and takes the width the ring had. */
.lg-result__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 1.25rem 2rem;
	padding: 2rem;
	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.08);
	font-family: var(--lg-font);
}

/* --- Verdict ------------------------------------------------------------ */
.lg-result__verdict {
	min-width: 0;
}

/* 0.9rem, not 0.3. The headline used to sit between this and the percentage
   and supplied most of the distance; with it gone the sheet name was leaning
   on the figure. This is the space the verdict used to occupy, minus the
   verdict - which is the whole point of removing it.

   On the eyebrow rather than on .lg-result__figure, so a category that still
   passes a headline gets the tight 0.3rem-equivalent it always had: the
   headline's own top margin is 0 and it simply takes this gap instead. */
.lg-result__eyebrow {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--lg-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lg-result__headline {
	margin: 0 0 0.4rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* --- The sheet's own score ---------------------------------------------- */
/* The figure and its caption on one line. baseline, not center: the caption is
   an aside to the number and should sit ON its line, the way a unit sits after
   a measurement. Wraps on a narrow card rather than shrinking the number. */
.lg-result__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.8rem;
	margin-bottom: 0.9rem;
}

/* The headline of the card in everything but name - this is the answer the
   learner came back for, so it is the biggest thing on it after the verdict. */
.lg-result__percent {
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.lg-result__detail {
	margin: 0;
	color: var(--lg-text-muted);
	font-size: 1.05rem;
	line-height: 1.4;
}

/* The bar under it. Where the ring only implied a whole, this has a full width
   to be measured against - which is what "2 of 10" means.

   Capped rather than run to the column's edge: at a wide window the verdict
   column is most of the card, and a bar that long stops reading as a
   proportion and starts reading as a divider. */
.lg-result__bar {
	display: block;
	max-width: 30rem;
	height: 12px;
	margin-bottom: 1.1rem;
	border-radius: 999px;
	background-color: var(--lg-score-ring-track);
	overflow: hidden;
}

/* min-width so that 0% is still a mark on the page. A suggestion card does the
   opposite - there an empty bar has to mean "never attempted" - but this bar
   only ever appears on a sheet just finished, so nought is a real score and
   drawing nothing would read as missing data rather than as a bad round. */
.lg-result__bar-fill {
	display: block;
	height: 100%;
	min-width: 0.6rem;
	border-radius: 999px;
	background-color: var(--lg-score);
}

/* Last time. A pill, because it is a fact about a DIFFERENT attempt and must
   not read as another line of this one.

   block + fit-content, not inline-block: the pill has to own its line. The
   mistakes link below is inline-block too, so as inline-block these two sat
   side by side whenever there was a previous attempt - a pill and a link
   sharing a row, reading as one strip of chrome rather than as a fact and an
   action. fit-content keeps the background hugging the words; a plain block
   would stretch the pill the width of the column. */
.lg-result__previous {
	display: block;
	width: fit-content;
	margin-bottom: 0.8rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
	font-size: 0.9rem;
	font-weight: 600;
}

/* The one link on the card that is about THIS attempt rather than the next
   one, so it takes the coral and the others do not. */
.lg-result__mistakes {
	display: inline-block;
	color: var(--lg-red);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lg-result__mistakes:hover {
	color: var(--lg-red-hover);
}

/* --- The mistakes ------------------------------------------------------- */
/* One card per wrong answer, opened by the link above. Spans both columns:
   the sentences are full-width prose and would be unreadable squeezed into the
   verdict column beside the score panel.

   Filled by grammar_v2.js the first time it is opened - see buildMistakes().
   Emitted empty and hidden by lg-result.php, so the place it occupies in the
   grid is a layout decision here and not something the script has to know. */
.lg-result__mistakes-list {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-top: 0.3rem;
}

/* The UA's own [hidden] rule is display:none, which the display above would
   beat on specificity - it has to be restated inside the component. */
.lg-result__mistakes-list[hidden] {
	display: none;
}

/* Tinted rather than outlined. These are not cards of the same kind as the
   suggestions below - nothing here is clickable - and a border would give them
   the same weight as the things that are. The tint says "this went wrong"
   quietly enough to be read three times in a row. */
.lg-mistake {
	padding: 1.15rem 1.3rem;
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-bad-bg);
}

/* The sentence, with the blank as an underscore run. Regular weight: the
   question is the context here, not the point - the two answers under it are.
   Deliberately NOT the exercise's own heading face and size; this is a
   reference to a question, not the question. */
.lg-mistake__question {
	margin: 0 0 0.8rem;
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.45;
}

.lg-mistake__line {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	font-family: var(--lg-font);
	font-size: 1rem;
	line-height: 1.5;
}

.lg-mistake__line + .lg-mistake__line {
	margin-top: 0.35rem;
}

/* align-self:center, not the row's baseline: an SVG has no baseline of its
   own, so a flex row aligns it by its bottom edge and the mark hangs low. */
.lg-mistake__icon {
	flex: 0 0 auto;
	align-self: center;
	width: 1.05em;
	height: 1.05em;
}

.lg-mistake__label {
	font-weight: 700;
}

/* Colour carries which line is which, and the strikethrough carries it again
   for anyone the colour does not reach. */
.lg-mistake__line--wrong {
	color: var(--lg-bad-text);
}

.lg-mistake__line--wrong .lg-mistake__answer {
	text-decoration: line-through;
}

.lg-mistake__line--correct {
	color: var(--lg-ok-text);
}

/* --- The section score -------------------------------------------------- */
/* Its own panel, so the two percentages on this card are never read as one
   number: the bar on the left is how the attempt went, this is where that
   leaves the course.

   The ground is --lg-surface-alt, not the cream it used to be. Cream is the
   gold family, and a gold panel around a gold ring turned the whole corner
   into one warm block with a figure somewhere inside it. A neutral panel lets
   the ring be the only gold thing in it, which is the point of the ring.

   Centred throughout: there is one figure here and it is the ring, so
   everything under it is a caption to it. The verdict column beside it stays
   left-aligned, and the contrast is what separates the two halves of the card
   without needing a rule between them. */
/* 13.5rem, not 15: the card is capped at 624px now, so the two columns share
   560px of content and every pixel this takes comes off the verdict. 216px
   holds the 132px ring and the points line without wrapping it, and leaves the
   verdict a little over 300 - which is the proportion the mockup draws. */
.lg-result__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 13.5rem;
	padding: 1.5rem 1.25rem;
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface-alt);
	text-align: center;
}

/* Same geometry as lg-score-card's ring, and the renderer emits the same r=43
   in the same 100-box - the Grammar Score is the same figure on both screens
   and has to be the same object. */
.lg-result__score-ring {
	position: relative;
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	margin-bottom: 0.85rem;
}

.lg-result__score-ring svg {
	display: block;
	width: 100%;
	height: 100%;
	/* From twelve o'clock. Without this the arc starts at three and a small
	   score looks like it is falling off the right-hand side. */
	transform: rotate(-90deg);
	transform-box: fill-box;
	transform-origin: center;
}

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

.lg-result__score-ring-arc {
	fill: none;
	stroke: var(--lg-score);
	stroke-width: 10;
	stroke-linecap: round;
}

.lg-result__score-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.9rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* Reads as a name now, not as an eyebrow: it labels the ring above it rather
   than heading a block, and it is under the thing it names. */
.lg-result__score-label {
	margin-bottom: 0.15rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.lg-result__score-line {
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

/* --- Actions ------------------------------------------------------------ */
.lg-result__actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	margin-top: 0.5rem;
}

/* Not a button. Repeating is the offer; going back is just the way out, and
   two pills side by side would make them look like a choice between equals. */
.lg-result__back {
	color: var(--lg-text-muted);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

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

/* --- The two lists ------------------------------------------------------ */
.lg-result__next {
	padding-top: 2.25rem;
}

.lg-result__more {
	padding-top: 2.25rem;
	margin-top: 2.25rem;
	border-top: 1px solid var(--lg-border);
}

.lg-result__section {
	margin: 0 0 0.9rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lg-result__list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

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

	/* One column: the score panel drops under the verdict rather than
	   squeezing it. A ring plus two lines of figures needs its 15rem, and the
	   verdict is the half that would have given way. */
	.lg-result__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.lg-result__score {
		min-width: 0;
		width: 100%;
	}

	/* Full width now, so the cap that stopped it reading as a divider on a
	   wide card no longer applies. */
	.lg-result__bar {
		max-width: none;
	}
}

@media (max-width: 560px) {

	.lg-result__card {
		padding: 1.5rem 1.25rem;
		gap: 1.25rem;
	}

	.lg-result__score {
		padding: 1.25rem 1rem;
	}

	.lg-result__score-ring {
		width: 112px;
		height: 112px;
	}

	.lg-result__score-ring-value {
		font-size: 1.65rem;
	}

	.lg-result__actions > .lg-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   The questions, once the sheet is finished

   Hidden rather than removed: they ARE the mistakes the result links to, and
   "Show your 8 mistakes" takes the class off again. Nothing is destroyed, so
   the link is reversible and the browser's own find-in-page still reaches
   them once they are back.
   --------------------------------------------------------------------------- */
.lg-exercise--finished #questions {
	display: none;
}