/**
 * The bar under a lesson, and the lock that replaces one.
 *
 * Structure and weight only - no font family, no type scale, no brand colour.
 * This sits directly under author-written lesson content inside whatever theme
 * the page already has, and a plugin that declares its own type is a plugin you
 * can see the seams of.
 *
 * What changed after seeing it on the real site: the first version was three
 * stacked paragraphs and a bare underlined link. It WAS styled - the rule above
 * the bar and the right-aligned Next both came from this file - and it still
 * read as leftover text rather than as controls, because nothing had an edge.
 * Buttons need a boundary to look like buttons.
 *
 * REBASED ONTO course-page.css's color-mix(currentColor) CONVENTION. This
 * file predates that one and used a flat rgba(127,127,127,...) grey for
 * every border and fill - legible, but the one colour a theme actually sets
 * (its own text/link colour) never reached it, so a course page with real
 * brand character above the fold ran into a step footer that looked like it
 * belonged to no theme at all. color-mix(in srgb, currentColor N%,
 * transparent) picks up whatever that colour is without this file ever
 * naming it - still zero brand colour declared here, just more of the
 * theme's own actually reaching the page. Same @supports fallback
 * course-page.css uses, for the same reason.
 */

.tg-step-chrome {
	/* Extra room at the bottom - .tg-step-sticky floats over whatever is
	   last on the page, and without this its own Previous/Next pair would
	   be the thing it covers. */
	margin: 2.5em 0 5.5em;
	padding-top: 1.5em;
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* ---------------------------------------------------------------
   Where am I
   --------------------------------------------------------------- */

.tg-step-chrome__position {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1em;
}

/*
 * "Lesson" / "Topic" / "Quiz" as a badge.
 *
 * A student arriving from a link cannot otherwise tell which they are on: a
 * lesson and the quiz that tests it are named after the same material here, so
 * the title says nothing. Text in a box rather than a colour, because a colour
 * says nothing to a screen reader either.
 */
.tg-step-chrome__kind {
	padding: 0.15em 0.6em;
	border-radius: 4px;
	background: color-mix(in srgb, currentColor 15%, transparent);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tg-step-chrome__count {
	font-size: 0.9em;
	opacity: 0.7;
}

/* ---------------------------------------------------------------
   Finishing
   --------------------------------------------------------------- */

.tg-step-chrome__complete {
	margin: 0 0 1em;
}

.tg-step-chrome__button {
	padding: 0.7em 1.6em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tg-step-chrome__button:hover,
.tg-step-chrome__button:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/*
 * Done is a state, not a sentence.
 *
 * It was a bare bold word sitting where the button had been, which reads as a
 * heading for whatever follows rather than as the answer to "have I finished
 * this". The tick is decoration; the word carries the meaning, so a screen
 * reader that skips the pseudo-element loses nothing.
 */
.tg-step-chrome__done {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1em;
	padding: 0.45em 0.9em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
}

.tg-step-chrome__done::before {
	content: "\2713";
	font-size: 1.1em;
	line-height: 1;
}

.tg-step-chrome__blocked {
	margin-bottom: 1.5em;
	padding: 1em 1.25em;
	border-left: 3px solid currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.tg-step-chrome__blocked p {
	margin: 0 0 0.5em;
}

.tg-step-chrome__blocked ul {
	margin: 0;
	padding-left: 1.25em;
}

/* ---------------------------------------------------------------
   Where next
   --------------------------------------------------------------- */

/**
 * Previous on the left, Next on the right, and Next alone still sits right -
 * which is what `margin-left: auto` on the only child achieves. A first lesson
 * whose Next button jumped to the left edge would move under the student's
 * cursor between one page and the next.
 */
.tg-step-chrome__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: stretch;
	margin-top: 1.5em;
}

.tg-step-chrome__nav a {
	display: flex;
	flex-direction: column;
	gap: 0.25em;

	/* min-width:0 so a long step title wraps inside the button instead of
	   forcing the row wider than the content column. These run to
	   "Carbohydrate Metabolism: Gluconeogenesis and Glycogen". */
	flex: 0 1 auto;
	min-width: 0;
	max-width: 22em;
	overflow-wrap: break-word;

	padding: 0.75em 1.1em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.tg-step-chrome__nav a:hover,
.tg-step-chrome__nav a:focus-visible {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.tg-step-chrome__next {
	margin-left: auto;
	text-align: right;
}

/*
 * "Next quiz", not "Next". The direction alone left a student unable to tell
 * whether clicking meant reading or being assessed.
 */
.tg-step-chrome__direction {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.tg-step-chrome__title {
	font-weight: 600;

	/* Underlined on hover only: inside a bordered button a permanent underline
	   made it read as a link that happened to have a box round it. */
	text-decoration: none;
}

.tg-step-chrome__nav a:hover .tg-step-chrome__title {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Always in view
   --------------------------------------------------------------- */

/*
 * StepChrome::stickyBar()'s output - the same "what's next" html() already
 * puts at the end of the page, fixed to the bottom of the viewport instead
 * so a student reading a long lesson does not have to scroll past all of it
 * first. See that method's own docblock for why this shows one action, not
 * the whole chrome.
 *
 * `Canvas` IS A COLOUR, NOT A BRAND CHOICE. Every other background on this
 * page is a `color-mix(currentColor N%, transparent)` tint that lets the
 * theme's own page colour show through, because this element has no page
 * colour behind it to tint - it floats above the content, over whatever a
 * student has scrolled to, including an image. `Canvas` is the CSS system
 * colour for "this platform's own page background", light OR dark,
 * decided by the browser/OS rather than by this file - so a bar that must
 * stay legible over anything still declares no brand colour of its own.
 */
.tg-step-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 0.6em max(0.9em, env(safe-area-inset-left)) calc(0.6em + env(safe-area-inset-bottom)) max(0.9em, env(safe-area-inset-right));
	background: Canvas;
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

@supports not (background: Canvas) {
	.tg-step-sticky {
		background: #fff;
	}
}

.tg-step-sticky__form {
	margin: 0;
}

.tg-step-sticky__button {
	display: block;
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.tg-step-sticky__button:hover,
.tg-step-sticky__button:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.tg-step-sticky__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.75em 1em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.tg-step-sticky__link:hover,
.tg-step-sticky__link:focus-visible {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.tg-step-sticky__link::after {
	content: "\2192";
	flex: 0 0 auto;
}

.tg-step-sticky__direction {
	flex: 0 0 auto;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.tg-step-sticky__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	text-align: right;
}

@media (max-width: 480px) {
	.tg-step-sticky__link {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tg-step-sticky__title {
		flex-basis: 100%;
		white-space: normal;
		text-align: left;
	}
}

/* ---------------------------------------------------------------
   Locked
   --------------------------------------------------------------- */

.tg-locked {
	margin: 1.5em 0;
	padding: 1.5em;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.tg-locked p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Older browsers
   --------------------------------------------------------------- */

/*
 * Same reasoning as course-page.css's own block: color-mix() is well
 * supported but not universal, and every use above is a border or a fill
 * that must not become invisible where it is not understood.
 */
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.tg-step-chrome {
		border-top-color: rgba(128, 128, 128, 0.3);
	}

	.tg-step-chrome__kind {
		background: rgba(128, 128, 128, 0.2);
	}

	.tg-step-chrome__button:hover,
	.tg-step-chrome__button:focus-visible {
		background: rgba(128, 128, 128, 0.15);
	}

	.tg-step-chrome__done {
		border-color: rgba(128, 128, 128, 0.35);
	}

	.tg-step-chrome__blocked {
		background: rgba(128, 128, 128, 0.1);
	}

	.tg-step-chrome__nav a {
		border-color: rgba(128, 128, 128, 0.35);
	}

	.tg-step-chrome__nav a:hover,
	.tg-step-chrome__nav a:focus-visible {
		background: rgba(128, 128, 128, 0.1);
	}

	.tg-locked {
		border-color: rgba(128, 128, 128, 0.35);
		background: rgba(128, 128, 128, 0.08);
	}

	.tg-step-sticky {
		border-top-color: rgba(128, 128, 128, 0.3);
	}

	.tg-step-sticky__button:hover,
	.tg-step-sticky__button:focus-visible {
		background: rgba(128, 128, 128, 0.15);
	}

	.tg-step-sticky__link {
		border-color: rgba(128, 128, 128, 0.35);
	}

	.tg-step-sticky__link:hover,
	.tg-step-sticky__link:focus-visible {
		background: rgba(128, 128, 128, 0.1);
	}
}