/* ===========================================================================
   lg.exercise-text — the fill-in-the-blank question, restyled
   ---------------------------------------------------------------------------
   The sibling of lg.exercise-mc.css, for exercises of type 1. Same principle:
   NO NEW MARKUP, this restyles what _app/grammar_v2.php and js/grammar_v2.js
   already produce.

     .panel-exercise-fulltext        the whole exercise (also carries a.css's
                                     "panel", which is reset below)
       .exercise-box                 one question   (+ .exercise-box-answered)
         .question                   the sentence, with an <input> per gap
           input.exercise-input      one gap
           .corrected-result         what that gap became once checked
         .answers.answers--text      the per-question state + check control
           .check-answer             "check answers"

   WHY THIS FILE EXISTS AT ALL

   The multiple choice sheet dropped a.css's "panel" class when it was restyled;
   the text sheet still carries it, and a.css:862 gives .panel 2rem of padding,
   a white ground and a 5px #E8E8E8 border - the old card. It also still lays
   .exercise-box out as table-cells with dotted gridlines. All of that has to be
   undone here, the same way lg.exercise-mc.css undoes it, or the stepped layout
   renders inside a box that belongs to the previous design.

   The rules are near-copies of that file's rather than shared with it, because
   the two panels are selected differently and CSS has no way to say "the same
   block, one more selector" without either a preprocessor or a specificity
   change. Where a rule here matches one there, they are meant to stay in step.

   WHAT IS NOT HERE

   The stepped LAYOUT - one question at a time, the measured column, the
   spacing resets - lives in lg.exercise-mc.css, where every one of those rules
   names .panel-exercise-fulltext alongside .panel-exercise-mc. It is the same
   behaviour for both types and belongs in one place; the file is misnamed for
   it, which is worth fixing when either type next needs work.
   =========================================================================== */

/* --- The exercise ------------------------------------------------------- */
/* a.css's card, off. The page container supplies the gutters, and the sticky
   exercise head above supplies the separation this border was doing. */
.panel-exercise-fulltext.panel {
	padding: 2rem 0 0;
	border: 0;
	border-radius: 0;
	background: none;
}

@media (max-width: 560px) {

	.panel-exercise-fulltext.panel {
		padding-top: 1.5rem;
	}
}

/* --- One question ------------------------------------------------------- */
/* The old two-column table, undone - see the longer note in lg.exercise-mc.css.
   Every variant is named because -left and -right each re-declare the width and
   the borders, and neither inherits the reset from the base class. */
.panel-exercise-fulltext .exercise-box,
.panel-exercise-fulltext .exercise-box.exercise-box-full,
.panel-exercise-fulltext .exercise-box.exercise-box-left,
.panel-exercise-fulltext .exercise-box.exercise-box-right {
	display: block;
	width: auto;
	margin: 0 0 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	float: none;
	vertical-align: baseline;
}

.panel-exercise-fulltext .exercise-box:last-child {
	margin-bottom: 0;
}

/* a.css dims a finished question. Here the marks inside it carry the state, so
   it stays at full strength and stays readable. */
.panel-exercise-fulltext .exercise-box.exercise-box-answered {
	opacity: 1;
}

.panel-exercise-fulltext #questions {
	display: block;
	width: auto;
}

.panel-exercise-fulltext .questions_line {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 3.5rem;
	width: auto;
}

.panel-exercise-fulltext .questions_line > .exercise-box {
	margin-bottom: 0;
}

/* --- The sentence ------------------------------------------------------- */
/* Deliberately the same type as the multiple choice question: the two are the
   same thing to a learner - a sentence to work on - and a sheet that changed
   voice with the exercise type would read as two different products.

   line-height is looser than the 1.45 there. A gap here is an input box, which
   is taller than the words around it, so the lines need more room or a wrapped
   sentence collides with itself. */
.panel-exercise-fulltext .question {
	margin: 0 0 1.8rem;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: clamp(1.1rem, 1.00rem + 0.6vw, 1.3rem);
	font-weight: 700;
	line-height: 2;
}

/* The bracketed hint the editor writes as ((...)). */
.panel-exercise-fulltext .question .exercise-hint {
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.8em;
	font-weight: 400;
}

/* --- The gap ------------------------------------------------------------ */
/* One control, two parts: the field, and the hint that says what to put in it.
   _app/grammar_v2.php pulls a ((...)) written directly after a gap out of the
   sentence and into this wrapper - see the note there for why.

   The BOX lives on the wrapper and not on the input, so the divider between
   the two halves is a border between siblings rather than something drawn over
   a field's own edge. The input gives up its border and ground to it.

   inline-flex with vertical-align:baseline: the wrapper has to sit on the
   sentence's baseline like a word. A flex container's baseline is its first
   item's, which here is the input's text - so the typed answer lines up with
   the words either side of it, which is the whole point of putting it inline.

   overflow:hidden is what makes the rounding hold: without it the hint's own
   square corner prints over the wrapper's rounded one. */
.panel-exercise-fulltext .lg-gap {
	display: inline-flex;
	align-items: stretch;
	vertical-align: baseline;
	max-width: 100%;
	border: 1px solid var(--lg-border-input);
	border-radius: var(--lg-radius-lg);
	background-color: var(--lg-surface);
	box-shadow: 0 1px 3px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
	overflow: hidden;
	margin: 0 5px;
}

/* The ring goes on the wrapper, so focusing the field lights the whole
   control. On the input it would have drawn a second rounded rectangle just
   inside the first. */
.panel-exercise-fulltext .lg-gap:focus-within {

}

/* a.css gives input.exercise-input a 5px pad and a 5px radius and nothing else,
   so it inherited the browser's own field: a cool grey hairline on white inside
   a warm sentence. Inside the wrapper it has no chrome of its own at all.

   Width stays inline. The PHP sizes each field from the length of the longest
   answer that could fill it - see $input_width in _app/grammar_v2.php - and a
   stylesheet cannot know that number.

   font: inherit, then a smaller size: the gap has to sit in the sentence's
   typeface to read as part of it, but at the sentence's full weight it looked
   like a word already filled in. */
/* The field keeps a box of its own HERE, and gives it up below when it is
   inside the wrapper. That way round rather than the reverse, so a field that
   somehow renders outside a .lg-gap is still a visible box - and it needs no
   ":not(.lg-gap *)", which is a Level 4 selector this layer has not otherwise
   had to depend on. */
/* content-box, and this one matters. The width is set inline by the PHP and
   means "room for the answer plus one to three characters" - see $input_width
   in _app/grammar_v2.php. Under border-box the padding is subtracted from that,
   so every gap lost about a character and a half of the space it was sized for,
   and the shortest ones lost proportionally most. Here the padding is added
   around the measure instead, and the number means what it says. */
.panel-exercise-fulltext input.exercise-input {
	box-sizing: content-box;
	min-width: 4ch;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--lg-border-input);
	border-radius: var(--lg-radius-lg);
	background-color: var(--lg-surface);
	color: var(--lg-text);
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: baseline;
	text-align: center;
}

.panel-exercise-fulltext .lg-gap input.exercise-input {
	border: 0;
	border-radius: 0;
	background: none;
}

/* The wrapper carries the focus ring; a second one here would sit inside it. */
.panel-exercise-fulltext .lg-gap input.exercise-input:focus {
	outline: none;
}

/* Lighter than a typed answer, and not italic: it is a placeholder for a word,
   not an instruction. */
.panel-exercise-fulltext input.exercise-input::placeholder {
	color: var(--lg-text-muted);
	opacity: 0.6;
	font-weight: 400;
}

/* The hint, on the right. Quieter than the answer in every way it can be -
   smaller, lighter, muted, and in the body face rather than the sentence's
   heading face - because it is a prompt and not part of the sentence being
   built. The learner's own word is the one that should read as the content of
   this box. */
.panel-exercise-fulltext .lg-gap__hint {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 0.75rem;
	border-left: 1px solid var(--lg-border);
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.78em;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	user-select: none;
	margin: 3px 0px;
}

/* --- A checked gap ------------------------------------------------------ */
/* a.css:2006 bundles .corrected-result with .button and .answer under one
   background SHORTHAND carrying a white-to-#F3F3F3 gradient and a 3px #E8E8E8
   border - the old button. Setting only background-color leaves the gradient
   painted over it, which is why "background" is restated here.

   The pair is a fact, not a control: it says what was typed and what was
   right. So no card, no border - just the two marks and the words. */
.panel-exercise-fulltext .corrected-result {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0.15rem;
	padding: 0.15rem 0.4rem;
	border: 0;
	border-radius: var(--lg-radius-sm);
	background: none;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	vertical-align: baseline;
}

.panel-exercise-fulltext .corrected-result .mc_icon {
	width: 1rem;
	height: auto;
	margin: 0;
}

/* The answer that was given, struck through. Muted rather than red: the mark
   beside it has already said it was wrong, and a red sentence fragment inside
   a black sentence is hard to read past. */
.panel-exercise-fulltext .corrected-result del {
	color: var(--lg-text-muted);
	text-decoration: line-through;
}

/* --- The check control -------------------------------------------------- */
/* Only in stepped mode; ?view=sheet renders the one submit button under the
   whole sheet instead and this element is never emitted.

   Left-aligned under the sentence rather than in a bar across the foot of the
   screen, which is what the mockup draws. The bar wants a single control
   shared by every question and these are one per question, so it is the larger
   change - worth doing, not done here. */
.panel-exercise-fulltext .answers--text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	width: auto;
	margin: 1.6rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	float: none;
}

/* A <span role="button">, not a <button>: it sits inside the fulltext form and
   a real button there submits it. grammar_v2.js binds the keyboard contract
   that role brings with it. */
.panel-exercise-fulltext .check-answer {
	cursor: pointer;
	user-select: none;
}

/* Waiting on the server. Not disabled - a span cannot be - so the pointer and
   the opacity are what say "this one is already on its way". */
.panel-exercise-fulltext .check-answer--busy {
	opacity: 0.6;
	pointer-events: none;
}

/* An answered question keeps its .answers--text as the state marker the script
   and the progress strip read, but there is nothing left to show in it. */
.panel-exercise-fulltext .answers--text:empty {
	display: none;
}