/* ===========================================================================
   lg.reading-text — one reading text, with its questions beside it
   ---------------------------------------------------------------------------
   ALMOST NO NEW MARKUP. The two-column split the drawing shows already
   existed: _app/reading-listening.php has put the text beside the questions
   for years. This file restyles what is there, the same way lg.exercise-mc.css
   restyles the grammar sheet.

   What IS new is a head bar, a progress strip, and two class names. The
   columns were .fifty_left / .fifty_right, a.css's generic pair - renamed
   because this page wanted none of what that pair carried. See the note at
   .exercise-reading below.

   STRUCTURE

     .content.lg-read__head         back · name · level · worksheet
     .exercise-reading#exercise
       .lg-read__text                 the text card
         h1, p                        title and paragraphs
         .player-box                  the audio, restyled but not rebuilt
       .lg-read__quiz
         .lg-read__quiz-head          heading + "0 / 6"
         .lg-read__steps              one segment per question
         .questions_line
           .exercise-box              one question
             .question-box
               .question-number       the numeral, in a circle
               .question
               .answers
                 .answer  ×4          a/b/c/d option

   NO "panel" CLASS on #exercise for reading - see the note where it is
   printed. The text has a card of its own now, and two nested cards is one
   too many.

   THE PLAYER IS NOT REBUILT. The drawing and the current player are the same
   control - see mockups/reading-legacy-player.jpg. What changes is the box it
   sits in: a warm rounded panel inside the text card rather than a grey slab.

   Scoped under .exercise-reading throughout, so a listening text - which shares
   this file's markup but none of its drawings - is untouched.
   =========================================================================== */

/* --- The head bar -------------------------------------------------------- */
/* css/lg.text-head.css - shared with the listening exercise. */

/* --- The editor's summary ------------------------------------------------ */
/* Printed only for some texts, between the bar and the columns, and it is the
   one thing on this page that sits at .container level with no box of its own.
   The gutter comes from .content, which the PHP puts beside this class rather
   than repeating the measurement here.

   Only the top and the paragraph's own margins are set. The sides are
   .content's business, so that the summary, the bar above it and any other
   .content on the page keep the same edge whatever that value becomes.

   Not scoped under .exercise-reading like everything below: this paragraph is
   a sibling of #exercise, not a descendant. */
.lg-read__summary {
	padding-top: 1.4rem;
	color: var(--lg-text-muted);
}

.lg-read__summary p {
	margin: 0;
	max-width: 70ch;
	line-height: 1.55;
}

/* --- The two columns ----------------------------------------------------- */
/* THE COLUMNS ARE OURS NOW. They were .fifty_left and .fifty_right, a.css's
   generic pair, which brought three things this page does not want:

     display:inline-block and percentage widths, so the gap between the columns
     was a whitespace-sensitive margin;

     border-left:3px dotted #E8E8E8 on the right column - a separator, back
     when the two columns were peers. They are not: one is a text and the other
     is the questions about it, and the gap between them says that on its own;

     padding-left:2% and margin-left:1.5% to clear that border.

   Renaming them takes all of it away at the source instead of overriding it
   line by line, and the names now say what the columns hold. Both are printed
   only for reading, so nothing else was using them.

   Grid, not inline-block: a real gap instead of a percentage margin, and equal
   top alignment without vertical-align.

   NOT 50/50. The text takes the larger share - roughly 57/43 - because the two
   columns are not doing equally demanding work. The left one is prose, read
   line by line; the right is six short questions with four pill options each,
   and those are scanned. Giving the questions less width tightens them without
   costing anything, and the card gets the air instead.

   fr rather than percentages, so the gap comes out of the track sizing and not
   out of the columns. */
.exercise-reading {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr);
	gap: 2rem;
	align-items: start;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* --- The text card ------------------------------------------------------- */
/* The drawing puts the text on a white card with generous padding, which is
   also what stops a wide screen setting the paragraphs in a 900px measure. */
.exercise-reading .lg-read__text {
	box-sizing: border-box;
	min-width: 0;
	padding: 2rem 2.25rem 2.25rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: 0 2px 6px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.05);
}

.exercise-reading .lg-read__quiz {
	min-width: 0;
}

.exercise-reading .lg-read__text h1 {
	margin: 0 0 1.5rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* The text itself. Looser than the site's default: this is the one block on
   the page somebody reads rather than scans, and at A1 they are reading it
   slowly. max-width in ch because the measure is about characters per line,
   not pixels - the card is already narrow enough on most screens for this to
   bite only on a very wide one. */
.exercise-reading .lg-read__text p {
	max-width: 62ch;
	margin: 0 0 1.15rem;
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.75;
}

/* --- The player ---------------------------------------------------------- */
/* The panel, bar and speaker cards are css/lg.player.css, shared with the
   listening exercise. What stays here is where reading puts it - under the
   text, inside the card - and the tablet voice chip further down. */
.exercise-reading .player-box.lg-player {
	margin-top: 1.75rem;
}

/* Below 720px: no total time. The bar is too narrow for two times and a
   track worth dragging; the elapsed time is the one that changes, so it
   stays. player.css hides it below 540px for every player - this extends that
   for reading, into the small tablets where the speaker chip also takes room
   in the bar. The track then runs up to the next control, whose distance is
   the bar's own gap. */
@media (max-width: 719px) {

	.exercise-reading .green-audio-player .controls__total-time {
		display: none;
	}

	.exercise-reading .green-audio-player .controls .controls__slider {
		margin-right: 0;
	}
}

/* --- The questions column ------------------------------------------------ */
/* One question per row. a.css pairs them into .questions_line two abreast,
   which is right when the questions are the whole page and wrong when they are
   a column beside a text: at half the width, four options two-up would be two
   words each. */
.exercise-reading .lg-read__quiz .questions_line {
	display: block;
}

.exercise-reading .lg-read__quiz .exercise-box,
.exercise-reading .lg-read__quiz .exercise-box.exercise-box-left,
.exercise-reading .lg-read__quiz .exercise-box.exercise-box-right {
	display: block;
	width: auto;
	margin: 0;
	padding: 1.5rem 0;
	border: 0;
	background: none;
	float: none;
	vertical-align: baseline;
}

/* A hairline between questions rather than a box around each: the column is
   already a list, and six bordered cards beside one bordered card is a lot of
   chrome for a page whose subject is a paragraph of prose. */
.exercise-reading .lg-read__quiz .exercise-box + .exercise-box,
.exercise-reading .lg-read__quiz .questions_line + .questions_line .exercise-box:first-child {
	border-top: 1px solid var(--lg-border);
}

/* --- Quiz head, strip, questions, options: css/lg.quiz.css ------------- */

/* --- The narrow two-column band ------------------------------------------ */
/* Between 850px and 1024px the columns are still side by side, but the
   right-hand one is now too narrow to hold two pills across: four options in
   two columns of ~170px wrap to two lines each and the pill stops being a
   pill. One per row instead, and the width that buys goes to the text.

   A RANGE, not a max-width. Below 850px the page stacks and the questions get
   the full width of it - where two across is right again, and is what the
   tablet drawing shows. A plain max-width:1024px would reach down there and
   undo it. min-width:851px is the exact complement of the 850px below.

   This is the one band where the layout is not drawn: the desktop mockup is
   wider and the tablet one has stacked. It is what a browser window between
   the two gets, and it wants to look deliberate rather than like a desktop
   design running out of room. */
@media (max-width: 1024px) and (min-width: 850px) {

	/* More of the split to the text. With one option per row the questions
	   need less width than they did, and prose is the thing that suffers first
	   when a column is squeezed. */
	.exercise-reading {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr);
		gap: 1.75rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.exercise-reading .lg-read__quiz .answers,
	.exercise-reading .lg-read__quiz .answers.long-answers {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The card's side padding comes in with the column: at this width 2.25rem
	   either side is a fifth of the card spent on margin. */
	.exercise-reading .lg-read__text {
		padding: 1.75rem 1.75rem 2rem;
	}
}

/* --- Narrow -------------------------------------------------------------- */
/* THE STACK IS OURS TOO. a.css used to do this at 850px, through .fifty_left
   and .fifty_right - and it went with the names. Same breakpoint, so the page
   reflows where it always did.

   This is the desktop build. The phone gets a bottom sheet that keeps the text
   visible while the questions are open, which is a different layout and not
   drawn yet; until it is, these rules keep the stacked page usable rather than
   pretending to be that design. */
@media (max-width: 850px) {

	.exercise-reading {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom: 2rem;
	}

	.exercise-reading .lg-read__text {
		padding: 1.5rem 1.35rem 1.75rem;
	}

	/* The meta line appears here and nowhere above - see the note on it. */
	.exercise-reading .lg-read__meta {
		display: flex;
	}
}

/* --- An answered question: css/lg.quiz.css ---------------------------- */

/* ===========================================================================
   The meta line under the title
   ---------------------------------------------------------------------------
   "4 min · 205 words · PDF worksheet". Hidden above 850px: there the card is
   half the page and the same worksheet button is two inches above it in the
   head bar, so the drawing leaves it off. Below, the card is the full width
   and the head bar has scrolled away.
   =========================================================================== */
.exercise-reading .lg-read__meta {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.1rem;
	margin: -1rem 0 1.5rem;
}

.exercise-reading .lg-read__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.9rem;
	line-height: 1.3;
	text-decoration: none;
}

.exercise-reading .lg-read__meta-item svg {
	width: 0.95rem;
	height: 0.95rem;
	flex: 0 0 auto;
}

a.lg-read__meta-pdf:hover {
	color: var(--lg-text);
	text-decoration: none;
}

/* ===========================================================================
   The voice chip, and the speaker list behind it
   ---------------------------------------------------------------------------
   TABLETS ONLY, 650px to 850px. There the questions move under the text, the
   player gets a row to itself with room at the right-hand end, and the
   drawing spends that room on the voice instead of the vertical space four
   cards were taking (mockups/reading-detail-player-tablet.jpg).

   Above 850px the speaker cards sit under the player, always open (the
   desktop drawing). Below 650px - phones - the same: a bar that narrow has
   no room for a name beside the controls, so the cards are back under it and
   always open (mockups/reading-detail-player-mobile.jpg). The chip markup is
   still printed there; it is hidden by the rule below.
   =========================================================================== */
.lg-read__voices-switch,
.lg-read__voice {
	display: none;
}

@media (min-width: 650px) and (max-width: 850px) {

	/* ONE WHITE BAR, with the chip at its right-hand end, as on
	   mockups/reading-detail-player-tablet.jpg. The chip is not inside the
	   player in the markup - the player rebuilds its own contents on every
	   change of speaker - so the bar is drawn behind both: a grid with the
	   player and the chip in row 1, the speaker list in row 2, and a white
	   ::before spanning row 1. The player's own white goes, or its rounded
	   right-hand corners would show against the chip. */
	.exercise-reading .player-box {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.exercise-reading .player-box::before {
		content: "";
		grid-row: 1;
		grid-column: 1 / -1;
		align-self: stretch;
		border-radius: calc(var(--lg-radius-card) - 0.25rem);
		background-color: var(--lg-surface);
	}

	.exercise-reading .player-box > .wrapper-lingua-player {
		position: relative;
		grid-row: 1;
		grid-column: 1;
		min-width: 0;
	}

	.exercise-reading .player-box > .wrapper-lingua-player .green-audio-player {
		background-color: transparent;
		padding-right:0.8rem;
	}

	.exercise-reading .player-box .lg-read__voice {
		position: relative;
		grid-row: 1;
		grid-column: 2;
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		margin-right: 1rem;
		padding: 0.3rem 0.5rem 0.3rem 0.3rem;
		border-radius: 999px;
		color: var(--lg-text-muted);
		font-family: var(--lg-font);
		font-size: 1.05rem;
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		cursor: pointer;
		user-select: none;
		transition: background-color 0.15s ease;
	}

	/* The bar is white now, so the hover is the panel's warm tone. */
	.exercise-reading .player-box .lg-read__voice:hover {
		background-color: var(--lg-surface-alt);
	}

	.lg-read__voices-switch:focus-visible ~ .lg-read__voice {
		outline: 2px solid var(--lg-red);
		outline-offset: 2px;
	}

	.exercise-reading .lg-read__voice-face img {
		display: block;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		object-fit: cover;
	}

	.exercise-reading .lg-read__voice-caret {
		width: 1.15rem;
		height: 1.15rem;
		color: var(--lg-text-muted);
		transition: transform 0.2s ease;
	}

	.lg-read__voices-switch:checked ~ .lg-read__voice .lg-read__voice-caret {
		transform: rotate(180deg);
	}

	/* Collapsed until the chip is pressed; open, it takes the row under the
	   bar. */
	.exercise-reading .player-box .wrapper-lingua-speakers {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.lg-read__voices-switch:not(:checked) ~ .wrapper-lingua-speakers {
		display: none;
	}
}

/* ===========================================================================
   One question at a time
   ---------------------------------------------------------------------------
   The hiding itself is done in script - which question is current depends on
   what has been answered, and CSS cannot know that. What is here is only what
   the stepped view needs to LOOK right: no hairline above a question that is
   the only one on screen, and room under it.

   See lgReadStep() in _app/reading-listening.php for the rule it applies and
   why it is bound to the same 850px.
   =========================================================================== */
@media (max-width: 850px) {

	.exercise-reading .lg-read__quiz .exercise-box {
		padding: 0 0 1.5rem;
		border-top: 0;
	}

	.exercise-reading .lg-read__quiz .exercise-box + .exercise-box,
	.exercise-reading .lg-read__quiz .questions_line + .questions_line .exercise-box:first-child {
		border-top: 0;
	}

	/* The question is the heading of its own screen now, not a line in a list. */
	.exercise-reading .lg-read__quiz .question {
		font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
	}

	/* The number in a circle was a list marker; with one question on screen
	   there is nothing to number against. The strip above says where you are. */
	.exercise-reading .lg-read__quiz .question-number {
		display: none;
	}

	/* The options keep their two columns here. Nothing to write: the base rule
	   already sets them and the stack gives them MORE room, not less, because
	   the questions now have the full page width instead of half of it. The
	   single-column fallback that used to sit at this breakpoint is gone - it
	   was there when 850px was the narrowest case anyone had drawn. */
}

/* ===========================================================================
   Finished
   ---------------------------------------------------------------------------
   The questions go behind the result, the way .lg-exercise--finished hides
   #questions on a grammar sheet.

   The difference is what happens to the mistakes. There the questions ARE the
   mistakes - buildMistakes() reads them out of the page - so they are hidden
   rather than removed and the link brings them back. Here the list arrives
   inside the result already built (lg_reading_mistakes()), so nothing needs
   them and they can simply go.

   The quiz head and the strip go with them: "6 / 6" over a result card that
   already says 83% is the same fact twice, and the strip was a position
   indicator for a walk that is over.

   The class is put on by script when the result lands - see the answer handler
   in _app/reading-listening.php - and only ever onto .exercise-reading. It is
   therefore gone after any reload, which is what restores the questions when
   the restart button is pressed: that button is a plain link back to the same
   page, so the test comes back untouched with no state to undo.

   .question-box, NOT .questions_line. The reading questions are .question-box
   elements sitting straight in .lg-read__quiz; .questions_line is the pair
   wrapper the LISTENING branch emits and reading never has one, so the rule
   that named it hid nothing and the questions stayed under the result. */
/* Selectors as specific as the layout rules they override, and !important:

     - .exercise-reading .lg-read__quiz .question-box sets display:flex with
       three classes, which beat the two this rule used to have - the
       questions stayed on screen under the result.
     - below 850px lgReadStep() walks the questions with jQuery show()/hide()
       on each .exercise-box, and those are INLINE display values, which no
       stylesheet rule beats without !important.

   The .exercise-box goes too, not just the question inside it: it carries the
   hairline between questions, and empty boxes would leave a stack of rules. */
.exercise-reading.lg-read--finished .lg-read__quiz-head,
.exercise-reading.lg-read--finished .lg-read__steps,
.exercise-reading.lg-read--finished .lg-read__quiz .exercise-box,
.exercise-reading.lg-read--finished .lg-read__quiz .question-box {
	display: none !important;
}

/* The result is the only thing left in the column, so it should not still be
   sitting in the gap the strip left above it. */
.lg-read--finished .lg-read__quiz .lg-reading-result {
	margin-top: 0;
}

/* ===========================================================================
   Phones: the questions as a bottom sheet
   ---------------------------------------------------------------------------
   Mockup: beta/mockups/reading-exercise-mobile.jpg.

   Below 650px - the width at which the bottom navigation appears (see
   lg.bottom-nav.css), so "phone" means the same thing in both files - the quiz
   leaves the flow and is pinned to the foot of the screen, sitting on the
   navigation bar. The reader can read and answer without scrolling between
   the two.

     collapsed   the default. A peek: handle, "Did you understand the text?",
                 the strip and the top of the current question. Tapping
                 anywhere on it expands it - the tap does NOT answer, so an
                 option half under the screen edge cannot be chosen by accident.
     expanded    the whole current question, up to 80% of the screen. The
                 text stays scrollable above it. The handle collapses it again.
     finished    the result as the page, under the site header and the head
                 bar - the text steps aside, as on a grammar result.

   One question at a time, as below 850px already: lgReadStep() walks them, and
   the sheet just gives that walk a fixed place. The state classes are set by
   lgReadSheet() in _app/reading-listening.php:

     .lg-read__quiz--sheet      sheet mode is on (this width, script running)
     .lg-read__quiz--expanded   expanded
     .exercise-reading.lg-read--sheet   the page, while sheet mode is on

   Sheet mode is a class and not just this media query, so that without the
   script the quiz stays in the page and is answered the ordinary way - a
   pinned sheet that cannot be expanded would hide the options for good.
   =========================================================================== */

/* Hidden everywhere until sheet mode turns it on. */
.lg-read__sheet-toggle {
	display: none;
}

@media (max-width: 649px) {

	:root {
		/* How much of the screen the collapsed sheet takes. Only the starting
		   value: lgSheetPeek() in _app/reading-listening.php measures the
		   question on screen and overrides it on <html> with the height down
		   to the middle of the second answer, capped at 45% of the screen
		   (LG_SHEET_PEEK_MAX there). */
		--lg-read-sheet-peek: 38vh;
		--lg-read-sheet-bottom: calc(var(--lg-bottom-nav-height, 4.2rem) + 1px + env(safe-area-inset-bottom, 0px));

		/* The sheet's "Did you understand the text? 0 / 6" line. Shown on
		   phones as everywhere else. Set this to none to hide it for the room
		   - the strip below it also shows how far along the reader is. */
		--lg-read-sheet-head: flex;
	}

	.lg-read__quiz--sheet .lg-read__quiz-head {
		display: var(--lg-read-sheet-head);
	}

	/* The head bar's phone rules are in css/lg.text-head.css. */

	/* THE ALTERNATIVE, if it should only go on SHORT screens: set
	   --lg-read-sheet-head to flex above and uncomment this. 700px is about
	   where the collapsed sheet starts to crowd out the text.

	@media (max-height: 700px) {
		:root { --lg-read-sheet-head: none; }
	}
	*/

	/* The text has to be able to scroll clear of the collapsed sheet, or its
	   last lines would stay underneath it. .lg-read--sheet is set with the
	   sheet classes, by the same script. */
	.exercise-reading.lg-read--sheet {
		padding-bottom: calc(var(--lg-read-sheet-peek) + 1rem);
		padding-left: 1rem;
		padding-right:1rem;
		padding-top: 1rem;
	}

	.exercise-reading .lg-read__quiz.lg-read__quiz--sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--lg-read-sheet-bottom);
		/* Over the page, BEHIND the sticky head bar (5) and the site header
		   (6): an expanded sheet that reaches the top slides under both bars
		   rather than covering the way back. */
		z-index: 4;
		max-height: var(--lg-read-sheet-peek);
		margin: 0;
		padding: 0.4rem 1.1rem 1rem;
		overflow: hidden;
		border-radius: var(--lg-radius-card) var(--lg-radius-card) 0 0;
		/* The page's own background, as in the mockup: the white answer
		   options read as the things to press against it. The shadow is what
		   separates the sheet from the text card above. */
		background-color: var(--lg-bg);
		box-shadow: 0 -8px 30px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.18);
		cursor: pointer;
		transition: max-height 0.25s ease;
	}

	.exercise-reading .lg-read__quiz.lg-read__quiz--sheet.lg-read__quiz--expanded {
		max-height: 80vh;
		max-height: 80dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		cursor: auto;
	}

	/* The chevron, centred on top - the shape that says "this came
	   up from the bottom and can go back down". The whole sheet expands it; the
	   button is what collapses it again, and what a keyboard or screen reader
	   uses either way. */
	.lg-read__quiz--sheet .lg-read__sheet-toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.1rem;
		width: 100%;
		margin: 0 0 0.35rem;
		padding: 0.25rem 0 0.15rem;
		border: 0;
		background: none;
		color: var(--lg-text-muted);
		cursor: pointer;
	}

	/* The chevron alone, without a grab bar above it: it already says which
	   way the sheet will go. */
	.lg-read__sheet-chevron {
		width: 1.6rem;
		height: 1.6rem;
		transition: transform 0.2s ease;
	}

	/* Collapsed, the options are a preview: a tap expands the sheet rather
	   than answering (the capture handler in reading-listening.php), so they
	   are dimmed to stop looking pressable. On .answers, not .answer: an
	   answered option carries an inline opacity the PHP sets, and opacity on
	   the parent multiplies with it instead of fighting it. */
	.exercise-reading .lg-read__quiz--sheet .answers {
		transition: opacity 0.25s ease;
	}

	.exercise-reading .lg-read__quiz--sheet:not(.lg-read__quiz--expanded) .answers {
		opacity: 0.5;
	}

	/* Points down when there is somewhere to go down to. */
	.lg-read__quiz--expanded .lg-read__sheet-chevron {
		transform: rotate(180deg);
	}

	/* --- Finished: the result as the page ----------------------------------
	   Not an overlay. It takes the page, the way the grammar result does:
	   the sheet drops back into the flow and the text and its summary step
	   aside, so what is left under the site header and the sticky head bar
	   (name, level, worksheet - the grammar sheet's bar) is the result alone.
	   An overlay covered both bars and with them the way back.

	   html.lg-read-result-open is set by the answer handler when the result
	   lands, which also scrolls the window to the top. */
	.exercise-reading.lg-read--finished .lg-read__quiz.lg-read__quiz--sheet {
		position: static;
		/* The sheet's 6 would tie with the site header; in the flow the
		   result belongs in the page's base layer - see .lg-reading-result
		   in lg.result.css. */
		z-index: auto;
		max-height: none;
		margin: 0;
		padding: 1.25rem 0 0;
		overflow: visible;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		cursor: auto;
	}

	.exercise-reading.lg-read--finished .lg-read__quiz--sheet .lg-read__sheet-toggle {
		display: none;
	}

	.exercise-reading.lg-read--finished .lg-read__text,
	html.lg-read-result-open .lg-read__summary {
		display: none;
	}

	/* One question in the sheet: the space under it would only push the
	   sheet's bottom edge further from the last option. */
	.exercise-reading .lg-read__quiz .question-box {
		margin-bottom: 0;
		padding-bottom:0.5rem;
	}

	/* "Back to all texts" is the head bar's chevron, a thumb's reach above;
	   on a phone the button is the same way back twice. */
	.exercise-reading.lg-read--finished.lg-read--sheet .lg-result__back {
		display: none;
	}

	/* The room kept for the collapsed sheet is not needed any more, and the
	   result starts right under the head bar: no top padding, and the head
	   bar's own 1rem at the sides so the result lines up with the chevron and
	   the name above it. */
	.exercise-reading.lg-read--finished.lg-read--sheet {
		padding-top: 0;
		padding-right: 1rem;
		padding-bottom: 0;
		padding-left: 1rem;
	}

	/* --- No bottom navigation while the questions run ---------------------
	   html.lg-read-sheet-on is set by lgReadSheet() while sheet mode is on and
	   the text is not finished. The sheet takes the bar's place at the foot of
	   the screen, and the body gives back the room it kept for the bar. The
	   result screen removes the class, so the navigation returns with it and
	   the full-screen result stops at the bar again (the default
	   --lg-read-sheet-bottom). Only this page loads this file, so the
	   overviews keep their navigation regardless. */
	/* The site footer too: past the end of the text it would scroll up into
	   the strip above the sheet - links nobody can use mid-question, in the
	   one place the reader needs for the text. */
	html.lg-read-sheet-on .lg-bottom-nav,
	html.lg-read-sheet-on .footer {
		display: none;
	}

	html.lg-read-sheet-on body {
		padding-bottom: 0;
	}

	html.lg-read-sheet-on {
		--lg-read-sheet-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* "You have answered 2 of 6 questions" - the sheet's head says "2 / 6"
	   already, and on a phone the line is worth less than the room. */
	.exercise-reading .lg-read__answered {
		display: none;
	}
}

/* One question at a time below 850px (lgReadStep()), so the hairline under a
   question separates it from nothing - on the bottom sheet it was a stray line
   under the options. The full list above 850px keeps it as the divider
   between questions. */
@media (max-width: 850px) {

	.exercise-reading .lg-read__quiz .question-box {
		border-bottom: 0;
	}
}

/* Phones: the text's title is already in the sticky head bar right above it
   (.lg-read__name), and twice in one screen is the space the bottom sheet
   needs. Hidden VISUALLY only - it is the page's one <h1>, and the bar's name
   is a plain span, so screen readers and search engines keep their heading.
   Same breakpoint as the bottom sheet. */
@media (max-width: 649px) {

	.exercise-reading .lg-read__text h1 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}


@media (max-width: 420px) {

	.exercise-reading .player-box {
		margin-left:-1.35rem;
		margin-right:-1.35rem;
	}

}