/* ===========================================================================
   lg-sheet-list — the exercises inside one topic
   ---------------------------------------------------------------------------
   Replaces the old .panel-navigation, which was a row of numbered buttons
   above a single exercise. Rows instead of buttons, because each one now has
   to carry a name, a type, a question count, a score and a worksheet link,
   and none of that fits in a button.

   Category-agnostic. Reading uses it for the texts inside a topic, listening
   for its audio texts, vocabulary for the lists inside a set - the row is
   "one thing you can open, with how far you got".

   STRUCTURE

     .lg-sheet-list
       h2.lg-sheet-list__title            Sheets in this topic
       ol.lg-sheet-list__items
         li > a.lg-sheet                  (or <span> when locked)
           .lg-sheet__marker              number, tick, or padlock
           .lg-sheet__body
             .lg-sheet__head              name + badges
             .lg-sheet__meta              type icon · 10 exercises
           .lg-sheet__score               85% + mini bar
         a.lg-sheet__pdf                  OUTSIDE the row link - see below

   WHY THE PDF LINK IS A SIBLING, NOT A CHILD

   An <a> inside an <a> is invalid and browsers unnest it, which silently
   breaks whichever one loses. So the row is a grid with two independent
   children: the big link covering name/meta/score, and the PDF link beside
   it. They only look like one card.
   =========================================================================== */

.lg-sheet-list {
	padding: 1rem 0 2.5rem;
}

.lg-sheet-list__title {
	margin: 0 0 1.15rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
}

.lg-sheet-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

/* ---------------------------------------------------------------------------
   One row
   --------------------------------------------------------------------------- */

.lg-sheet-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 1.2rem 1.1rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lg-sheet-row:hover {
	border-color: var(--lg-border-strong);
	box-shadow: 0 6px 18px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
}

/* The sheet the CTA points at. Outlined rather than filled: it has to be
   findable in a list of nine without becoming a second call to action
   competing with the button above. */
.lg-sheet-row--next {
	border-color: var(--lg-red);
	box-shadow: 0 0 0 3px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.05);
}

.lg-sheet-row--locked {
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lg-sheet-row--locked:hover {
	opacity: 0.75;
	box-shadow: none;
}

/* --- The link that covers most of the row ------------------------------- */
.lg-sheet {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
	color: inherit;
	font-family: var(--lg-font);
	text-decoration: none;
}

a.lg-sheet:hover {
	color: inherit;
	text-decoration: none;
}

a.lg-sheet:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: 4px;
	border-radius: var(--lg-radius);
}

/* --- Marker ------------------------------------------------------------- */
.lg-sheet__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: rgb(110, 115, 125);
	font-family: var(--lg-font-heading);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Finished: the gold is earned, so it fills rather than tints. */
.lg-sheet__marker--done {
	background-color: var(--lg-score);
	color: var(--lg-text-inverse);
}

.lg-sheet__marker--locked {
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
}

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

/* --- Body --------------------------------------------------------------- */
.lg-sheet__body {
	min-width: 0;
}

.lg-sheet__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	margin-bottom: 0.4rem;
}

.lg-sheet__name {
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
}

.lg-sheet__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	color: var(--lg-text-muted);
	font-size: 0.95rem;
	line-height: 1.3;
}

.lg-sheet__meta svg {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

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

/* --- Score -------------------------------------------------------------- */
.lg-sheet__score {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.lg-sheet__percent {
	min-width: 3ch;
	color: var(--lg-text);
	font-size: 1rem;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* An untouched sheet gets an em dash, not 0% - "you scored nothing" and "you
   have not been here" are different things to say. */
.lg-sheet__percent--empty {
	color: var(--lg-text-muted);
	font-weight: 400;
}

.lg-sheet__track {
	display: block;
	width: 6rem;
	height: 6px;
	border-radius: 999px;
	background-color: var(--lg-score-track);
	overflow: hidden;
}

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

/* --- The PDF button ----------------------------------------------------- */
.lg-sheet__pdf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	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.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.lg-sheet__pdf:hover {
	background-color: var(--lg-bg);
	border-color: var(--lg-border-strong);
	color: var(--lg-text);
	text-decoration: none;
}

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

.lg-sheet__pdf svg {
	width: 1rem;
	height: 1rem;
	position:relative;
	top:-1px;
	color: var(--lg-score-text);
}

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

	/* The score drops under the name rather than squeezing it: a sheet name
	   truncated to two words is worse than a taller row. */
	.lg-sheet {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 0.6rem;
	}

	.lg-sheet__score {
		grid-column: 2;
	}
}

@media (max-width: 480px) {

	.lg-sheet-row {
		padding: 0.8rem 0.9rem;
	}

	/* The label goes, the icon stays - it is still a tap target and still
	   says "worksheet", and at this width the row has no room for the word. */
	.lg-sheet__pdf {
		padding: 0.5rem;
	}

	.lg-sheet__pdf-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}