/* ===========================================================================
   lg-vocab-sheet — what a vocabulary list sheet adds to the grammar sheet
   ---------------------------------------------------------------------------
   The sheet itself is grammar's (lg.exercise*.css). A vocabulary question has
   one thing a grammar sentence does not: a short label saying what to do
   ("What does it mean?", "Write it in German"), because the three kinds of
   question look alike and are mixed on one sheet. And the word asked about is
   the whole question, so it is set larger than sentence text.
   =========================================================================== */

.lg-vocab-q__label {
	margin: 0 0 0.6rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The tint of the type, the same three colours as the list editor uses. */
.lg-vocab-q--passive   .lg-vocab-q__label { color: var(--lg-score-text); }
.lg-vocab-q--active    .lg-vocab-q__label { color: var(--lg-red); }
.lg-vocab-q--active_mc .lg-vocab-q__label { color: var(--lg-status-perfect-text); }

.lg-vocab-q__word {
	font-family: var(--lg-font-heading);
	font-size: 1.35em;
	font-weight: 700;
	color: var(--lg-text);
}

/* --- Multiple choice: the word first (mockups/vocabulary-list-mc.jpg) -------
   Centred: the word, large, with the play button beside it; under it the word
   type and level ("Noun · B1"); under that the direction as two flags; then
   the options. .question holds the word only - grammar_v2.js copies it into
   the mistakes list. */
.lg-vocab-q__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	margin: 0.5rem 0 1.75rem;
	text-align: center;
}

.lg-vocab-q__title {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.lg-vocab-q__head .question {
	margin: 0;
	padding: 0;
}

.lg-vocab-q__head .lg-vocab-q__word {
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.lg-vocab-q__meta {
	margin: 0;
	font-size: var(--lg-font-size-base);
	color: var(--lg-text-muted);
}

.lg-vocab-q__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0.25rem 0 0;
}

.lg-vocab-q__flag {
	display: block;
	width: 28px;
	height: auto;
	border-radius: 4px;
}

.lg-vocab-q__arrow {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--lg-red);
}

/* The play button: a white circle with the speaker in coral. Locked (basic
   members): pale, and a click opens the upsell instead. */
.lg-vocab-q__play {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3.0rem;
	height: 3.0rem;
	padding: 0;
	border: 1px solid var(--lg-border);
	border-radius: 50%;
	background-color: var(--lg-surface);
	color: var(--lg-red);
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.lg-vocab-q__play svg {
	width: 1.2rem;
	height: 1.2rem;
}

.lg-vocab-q__play:hover {
	border-color: var(--lg-red);
	transform: scale(1.05);
}

.lg-vocab-q__play.is-locked {
	opacity: 0.45;
	color: var(--lg-text-muted);
}

.lg-vocab-q__play.is-locked:hover {
	opacity: 0.7;
	border-color: var(--lg-border-strong);
}

/* --- The word answered before, under the question ----------------------------
   _components/lg-vocab-recap.php; grammar_v2.js placeRecap() fills the slot.
   A shade darker than the page and no border, so it reads as an aside rather
   than as one more thing to answer. */
.lg-vocab-recap-slot:empty {
	display: none;
}

.lg-vocab-recap {
	box-sizing: border-box;
	width: 100%;
	max-width: 32rem;
	margin: 2.25rem auto 0;
	padding: 1rem 1.25rem 1.1rem;
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface-alt);
	text-align: left;
	animation: lg-vocab-recap-in 0.25s ease;
}

.lg-vocab-recap__label {
	margin: 0 0 0.35rem;
	font-size: var(--lg-font-size-sm);
	color: var(--lg-text-muted);
}

.lg-vocab-recap__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.lg-vocab-recap__word {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lg-text);
}

.lg-vocab-recap__meaning {
	margin: 0.1rem 0 0;
	font-size: var(--lg-font-size-base);
	line-height: 1.4;
	color: var(--lg-text-soft);
}

.lg-vocab-recap__row--example {
	align-items: flex-start;
	margin-top: 0.7rem;
}

.lg-vocab-recap__example {
	flex: 1 1 auto;
	font-style: italic;
	line-height: 1.45;
	color: var(--lg-text-soft);
}

.lg-vocab-recap__example b {
	font-weight: 600;
	color: var(--lg-text);
}

/* The head's play button, smaller - same player, same locked state. */
.lg-vocab-recap .lg-vocab-recap__play {
	width: 2.1rem;
	height: 2.1rem;
}

.lg-vocab-recap .lg-vocab-recap__play svg {
	width: 0.95rem;
	height: 0.95rem;
}

.lg-vocab-recap__row--example .lg-vocab-recap__play {
	margin-top: -0.15rem;
}

@keyframes lg-vocab-recap-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lg-vocab-recap { animation: none; }
}

/* --- Multiple choice: options with more weight ------------------------------
   The grammar sheet's options (lg.exercise-mc.css), heavier here: a list
   option is one or two words, not a phrase, so it can carry a larger type and
   a taller, rounder pill without wrapping. The number sits on the warm score
   tint, as in the mockup. Scoped to the vocabulary sheet; grammar is
   untouched. One class more than the grammar rules, so no !important. */
.lg-vocab-sheet.panel-exercise-mc .answers-row {
	gap: 0.9rem;
}

.lg-vocab-sheet.panel-exercise-mc .answer {
	gap: 1.1rem;
	min-height: 4.75rem;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	font-size: 1.15rem;
	font-weight: 500;
}

.lg-vocab-sheet.panel-exercise-mc .answer .mc_number,
.lg-vocab-sheet.panel-exercise-mc .answers[data-already-answered="0"] .answer.active-answer:hover > .mc_number {
	width: 2.35rem;
	height: 2.35rem;
	background-color: var(--lg-score-track);
	color: var(--lg-text);
	font-size: 1rem;
}

/* The tick / cross that replaces the number once answered: exactly the
   number's size, or the text beside it moves left on the click
   (lg.exercise-mc.css draws it at grammar's 2rem). */
.lg-vocab-sheet.panel-exercise-mc .answer:has(.mc_icon)::before {
	width: 2.35rem;
	height: 2.35rem;
	background-size: 1.2rem 1.2rem;
}

@media (max-width: 560px) {

	.lg-vocab-sheet.panel-exercise-mc .answer {
		min-height: 3.8rem;
		padding: 0.7rem 1.1rem;
		font-size: 1.1rem;
	}

	.panel-exercise-mc .answers {
		gap: 0.5rem;
	}

	.lg-vocab-sheet.panel-exercise-mc .answers-row {
		gap: 0.5rem;
	}
}

/* --- Writing: the same head, then the input, all centred -------------------
   .lg-vocab-q__ask is the writing question's .question, holding the head and
   the input together (grammar_v2.js needs the input inside .question). */
.lg-vocab-q--active {
	text-align: center;
}

.lg-vocab-q__ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.lg-vocab-q__ask .lg-vocab-q__head {
	margin-bottom: 1.5rem;
}

/* Inside .question the meta line would take the sentence style of a text
   sheet (lg.exercise-text.css: heading face, 700, larger, line-height 2).
   Back to the multiple-choice question's quiet line. */
.lg-vocab-sheet .lg-vocab-q__ask .lg-vocab-q__meta {
	font-family: var(--lg-font);
	font-size: var(--lg-font-size-base);
	font-weight: 400;
	line-height: var(--lg-line-height);
	color: var(--lg-text-muted);
}

.lg-vocab-sheet .lg-vocab-q__ask .lg-vocab-q__direction {
	line-height: 1;
}

.lg-vocab-q__entry {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 100%;
}

/* --- The letter fields ------------------------------------------------------
   As the vocabulary trainer does it: a field per character of the answer,
   a few letters shown in grey (VocabularySheet::letterHint()), so where a word
   has several translations the learner sees which one is meant.

   Two layers in one monospace font: the cells (underline + grey hint letter)
   and, over them, a transparent input whose letter-spacing puts exactly one
   character into each cell. Monospace is what makes that hold: every glyph is
   1ch wide, the cell is 1ch + the spacing.

     cell width      --cell  = 1ch + --space
     glyph centred   padding-left of half the spacing

   The font size shrinks with the number of cells (--n, set by the page) so a
   long word still fits a phone; 1.6rem is the most it grows to. */
/* .lg-gap.lg-letters under .lg-vocab-sheet: one class more than grammar's
   .panel-exercise-fulltext .lg-gap (lg.exercise-text.css), whose frame this
   replaces. */
.lg-vocab-sheet .lg-gap.lg-letters {
	--space: 0.8ch;
	--cell: calc(1ch + var(--space));
	display: inline-flex;
	align-items: center;
	gap: 1.1rem;
	max-width: 100%;
	padding: 1rem 1.5rem 1.15rem 1rem;
	box-sizing: border-box;
	border: 1px solid var(--lg-border-strong);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	box-shadow: none;
	overflow: visible;
	margin: 0;
	/* --n: the box eases to the next word's length (see "From one word to the
	   next" below). */
	transition: --n 0.3s ease, border-color 0.15s ease, background-color 0.2s ease, box-shadow 0.15s ease;
}

/* No focus effect on the box: the coral underline of the next cell and the
   caret already show where typing goes. Stated, not just left out, so no
   other layer's focus rule shows through. */
.lg-vocab-sheet .lg-gap.lg-letters:focus-within {
	border-color: var(--lg-border-strong);
	box-shadow: none;
	outline: none;
}

.lg-letters__track {
	position: relative;
	display: block;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: clamp(1rem, calc((100vw - 10.5rem) / (var(--n) * 1.1)), 1.75rem);
	font-weight: 600;
	line-height: 1;
}

.lg-letters__cells {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	pointer-events: none;
}

.lg-letters__cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cell);
	color: var(--lg-text-muted);
	opacity: 0.55;
}

/* The line under each letter. Inset a little either side, so the cells read
   as separate fields rather than one long underline. */
.lg-letters__cell::after {
	content: "";
	position: absolute;
	left: 0.18ch;
	right: 0.18ch;
	bottom: -0.3em;
	height: 2px;
	border-radius: 1px;
	background-color: var(--lg-border-strong);
}

/* A space in the answer: a gap, no line. A separator (- ' .) is shown as the
   shape of the word and needs no line either. */
.lg-letters__cell--space::after,
.lg-letters__cell--sep::after {
	display: none;
}

/* Typed over: the hint letter gives way to what was typed. */
.lg-letters__cell.is-typed {
	color: transparent;
}

/* The cell the next letter goes into. */
.lg-letters__cell.is-next::after {
	background-color: var(--lg-red);
}

.lg-vocab-sheet .lg-vocab-q__entry .lg-letters .lg-letters__input {
	position: relative;
	display: block;
	box-sizing: content-box;
	width: calc(var(--n) * var(--cell));
	height: 1.5em;
	margin: 0;
	min-width: 0;
	padding: 0 0 0 calc(var(--space) / 2);
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--lg-text);
	font: inherit;
	letter-spacing: var(--space);
	text-align: left;
	caret-color: var(--lg-red);
}

/* --- The left slot: a pencil while typing, then the verdict --------------- */
.lg-letters__mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lg-letters__mark svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* --- Checked ---------------------------------------------------------------
   grammar_v2.js (lettersMark()) has replaced the input with the result in the
   same cells; the page draws the same for a reloaded attempt. The two
   correction spans markGap() writes stay in the DOM for the mistakes list,
   and are hidden here. */
/* Only a tint: the verdict is carried by the mark and the border, the
   background just warms or cools the box. Mixed into the surface rather than
   a new colour, so dark mode follows the tokens. The plain token is the
   fallback for a browser without color-mix(). */
.lg-vocab-sheet .lg-gap.lg-letters.is-correct {
	border-color: var(--lg-ok-text);
	background-color: var(--lg-ok-bg);
	background-color: color-mix(in srgb, var(--lg-ok-bg) 35%, var(--lg-surface));
	box-shadow: none;
}

.lg-vocab-sheet .lg-gap.lg-letters.is-wrong {
	border-color: var(--lg-bad-text);
	background-color: var(--lg-bad-bg);
	background-color: color-mix(in srgb, var(--lg-bad-bg) 35%, var(--lg-surface));
	box-shadow: none;
}

.lg-letters.is-correct .lg-letters__mark,
.lg-letters.is-wrong .lg-letters__mark {
	color: #ffffff;
	transform: scale(1.06);
}

.lg-letters.is-correct .lg-letters__mark { background-color: var(--lg-ok-text); }
.lg-letters.is-wrong .lg-letters__mark   { background-color: var(--lg-bad-text); }

.lg-letters.is-correct .lg-letters__cells,
.lg-letters.is-wrong .lg-letters__cells,
.lg-letters .corrected-result {
	display: none;
}

/* The cells keep their width once the input is gone, so the box does not
   shrink under the answer. */
.lg-letters.is-correct .lg-letters__track,
.lg-letters.is-wrong .lg-letters__track {
	min-width: calc(var(--n) * var(--cell));
}

.lg-letters__result {
	display: flex;
	align-items: center;
	height: 1.5em;
}

.lg-letters__char {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--cell);
}

.lg-letters.is-correct .lg-letters__result {
	color: var(--lg-ok-text);
}

/* Wrong, first: what was typed, in red - the letters that differ from the
   answer struck through. */
.lg-letters__result.is-given {
	color: var(--lg-bad-text);
}

.lg-letters__result.is-given .is-off {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* Then: the answer, the letters that were wrong picked out in green. */
.lg-letters__result.is-solution {
	color: var(--lg-text);
	animation: lg-letters-fix 0.25s ease;
}

.lg-letters__result.is-solution .is-fixed {
	border-radius: 4px;
	background-color: var(--lg-ok-bg);
	color: var(--lg-ok-text);
}

@keyframes lg-letters-fix {
	from { opacity: 0.2; transform: translateY(2px); }
	to   { opacity: 1;   transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lg-letters__result.is-solution { animation: none; }
	.lg-letters__mark { transition: none; }
}

/* The answer once checked (and after a reload): the same size as the field
   it replaces, so the head above does not jump. */
.lg-vocab-sheet .lg-vocab-q__entry .corrected-result {
	font-size: 1.25rem;
	font-weight: 500;
}

/* The special characters and the Check button under the field. The keys'
   rows are flex rows (lg.exercise-text.css), so they are centred by name. */
.lg-vocab-q--active .lg-special {
	margin: 1.5rem 0 0;
}

.lg-vocab-q--active .lg-special__head,
.lg-vocab-q--active .lg-special__row {
	justify-content: center;
}

/* .lg-vocab-sheet in front: the sheet is also .panel-exercise-mc, whose
   .answers stacks its children in a column - the tip and the button belong in
   one row. */
.lg-vocab-sheet .lg-vocab-q--active .answers--text {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin-top: 1.1rem;
}

/* "Tip: press [Enter] to check" in front of the button (mockups/
   vocabulary-active-text.jpg). Only where there is a real keyboard. It stays
   after the check too - hiding it would shift the centred button. */
.lg-enter-tip {
	display: none;
	order: -1;
	align-items: center;
	gap: 0.4em;
	color: var(--lg-text-muted);
	font-size: var(--lg-font-size-sm);
	white-space: nowrap;
}

.lg-enter-tip__key {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-sm);
	background-color: transparent;
	color: var(--lg-text);
	font-family: inherit;
	font-size: 0.95em;
	line-height: 1.3;
}

@media (min-width: 650px) and (hover: hover) and (pointer: fine) {
	.lg-enter-tip { display: inline-flex; }
	.lg-vocab-sheet .lg-vocab-q--active .answers--text { gap: 1.25rem; }
}

@media (max-width: 560px) {

	.lg-vocab-sheet .lg-gap.lg-letters {
		padding: 0.9rem 1rem 1.05rem;
	}

	.lg-vocab-q__entry {
		width: 100%;
	}
}

/* Locked or empty list: one line and a button, where the sheet would be. */
.lg-vocab-sheet__notice {
	max-width: var(--lg-column-max);
	margin: 2rem 0;
	padding: 1.5rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	font-family: var(--lg-font);
}

.lg-vocab-sheet__notice p {
	margin: 0 0 1rem;
}

/* The keyboard keeper (grammar_v2.js holdKeyboard()): focusable, so iOS keeps
   the keyboard up while it holds the focus between two words - but never
   seen and never in the way. Not display:none or visibility:hidden, which
   cannot take focus. font-size 16px: iOS zooms into a focused field set
   smaller than that. */
.lg-keyboard-keeper {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	font-size: 16px;
	pointer-events: none;
	caret-color: transparent;
}

/* While a list sheet runs (html.lg-exercise-on, set by _app/vocabulary-sheet.php
   and removed by grammar_v2.js with the result), on a PHONE only - below the
   650px at which the bottom navigation exists: no bottom navigation, no
   "More" panel, no site footer - the same as the reading text's
   html.lg-read-sheet-on. The body keeps only the phone's safe area at its
   foot instead of the bar's height (lg.bottom-nav.css). A desktop keeps its
   footer; the header is the rule below. */
@media (max-width: 649.98px) {

	html.lg-exercise-on .lg-bottom-nav,
	html.lg-exercise-on .lg-nav-sheet,
	html.lg-exercise-on .footer {
		display: none;
	}

	html.lg-exercise-on body {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* On a phone the site header goes too, while the sheet runs: the screen
   belongs to the word and the keyboard. Below 650px, the width at which the
   bottom bar exists (lg.bottom-nav.css) - a desktop keeps its header.

   --lg-header-offset is what the sticky .lg-exercise-head sits under. The
   header script writes it as an INLINE style on <html> (includes/header.php),
   which a stylesheet can only override with !important - without it the head
   bar would hang where the header used to end, with a gap above it. */
@media (max-width: 649.98px) {

	html.lg-exercise-on .header {
		display: none;
	}

	html.lg-exercise-on {
		--lg-header-offset: 0px !important;
	}
}

/* --- One head, one height, every kind of question ---------------------------
   The word, "Noun · B1" and the flags sit at the same height on every
   question, so stepping from one to the next does not make them jump. Three
   things used to move them:

     - the play button (understand questions only) is taller than a word, and
       the title row grew to it - active multiple choice, without one, sat
       higher;
     - a writing question's head is inside .question, which text sheets give
       line-height 2 and a larger font (lg.exercise-text.css);
     - a word without type and level had no meta line, and the flags moved up.

   So each row has a fixed height here, set after (and one class above) the
   rules it overrides. The title row's minimum is taller than both the largest
   word on one line (2.75rem x 1.15) and the play button (3.25rem), so every
   one-line word sits at the same place; a rare word long enough to wrap makes
   its row taller rather than running out of the column. */
.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__title {
	min-height: 3.5rem;
}

.lg-vocab-sheet .lg-vocab-q__head .question,
.lg-vocab-sheet .lg-vocab-q__ask {
	line-height: 1.2;
}

.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__word {
	display: block;
	line-height: 1.15;
}

.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__meta {
	height: 1.5rem;
	margin: 0;
	font-family: var(--lg-font);
	font-size: var(--lg-font-size-base);
	font-weight: 400;
	line-height: 1.5rem;
	color: var(--lg-text-muted);
}

/* The example sentence under the word (passive multiple choice only). It is
   the one row without a fixed height: a sentence may wrap, and a question
   without one keeps the head as it was. */
.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__example {
	display: none; /* hidden for the moment - remove to show it again */
	max-width: 34rem;
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--lg-text-soft);
}

.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__example b {
	font-weight: 600;
	color: var(--lg-text);
}

.lg-vocab-sheet .lg-vocab-q__head .lg-vocab-q__direction {
	height: 1.5rem;
	margin: 0.25rem 0 0;
	line-height: 1;
}

/* --- From one word to the next ----------------------------------------------
   Stepping (grammar_v2.js switchTo()): the answered question fades out
   (.lg-q-leaving), the next fades in (.lg-q-entering), and its letter box
   starts at the old word's length and eases to its own. The box's width is
   calc(var(--n) * var(--cell)), and a custom property only animates once the
   browser knows its type - hence @property; without it the box just jumps,
   as before. The trainer (lg.trainer.css) uses the same registration. */
@property --n {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

.lg-vocab-sheet.lg-exercise--stepped .exercise-box {
	transition: opacity 0.18s ease;
}

.lg-vocab-sheet.lg-exercise--stepped .exercise-box.lg-q-leaving {
	opacity: 0;
}

.lg-vocab-sheet.lg-exercise--stepped .exercise-box.lg-q-entering {
	animation: lg-q-in 0.22s ease;
}

@keyframes lg-q-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

	.lg-vocab-sheet .lg-gap.lg-letters,
	.lg-vocab-sheet.lg-exercise--stepped .exercise-box {
		transition: none;
	}

	.lg-vocab-sheet.lg-exercise--stepped .exercise-box.lg-q-entering {
		animation: none;
	}
}

/* The admin bar sits under the sheet (or the locked / empty notice) here, not
   over it - space above it instead of below. */
.lg-vocab-sheet + .lg-admin-bar,
.lg-vocab-sheet__notice + .lg-admin-bar {
	margin: 2.5rem 0 1.5rem;
}