/*
 * The course page: progress bar and syllabus.
 *
 * These class names have existed since the Elementor widgets were built and
 * nothing has ever styled them, so the syllabus has been rendering as a bare
 * nested bullet list - 61 links with no indication of which are lessons, which
 * are quizzes, or which are finished.
 *
 * INHERITS RATHER THAN DECLARES. No font family, no font size, no colour on
 * body text. This markup lands inside somebody's theme, and a stylesheet that
 * sets its own type is how a plugin ends up looking like a plugin.
 *
 * The single colour used is currentColor at reduced opacity, so it stays
 * legible on a dark theme as well as a light one without either being
 * detected.
 */

.tg-course-page {
    margin: 1.5rem 0;
}

/* ---------------------------------------------------------------
   Progress
   --------------------------------------------------------------- */

.tg-course-infobar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border: 1px solid currentColor;
    border-radius: 8px;

    /* The border would otherwise be as loud as the text. */
    border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.tg-course-infobar__status {
    font-weight: 600;
}

.tg-course-infobar__bar {
    /* min-width:0 so this can actually shrink inside the flex row rather than
       forcing the bar off the edge on a narrow screen. */
    flex: 1 1 12rem;
    min-width: 0;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 15%, transparent);
}

.tg-course-infobar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;

    /* Announced by the parent's role="progressbar" and aria-valuenow, so the
       fill itself is decoration. */
    transition: width 0.3s ease;
}

.tg-course-infobar__steps {
    opacity: 0.75;
    font-size: 0.9em;
}

.tg-course-infobar__resume {
    flex: 0 0 auto;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Syllabus
   --------------------------------------------------------------- */

/*
 * A <details> now, not an <h3> - see CourseContent::html()'s own comment
 * for why: one collapsible group per named section, opened by default so
 * nothing visible before this change is hidden by it, but foldable closed
 * for a syllabus long enough that scrolling past a finished section is real
 * friction. A run of lessons with no section name is unwrapped, same as
 * before, so a course that never used sections looks identical to how it
 * always has.
 *
 * FOUR VISUAL WEIGHTS FOR FOUR THINGS, NOT ONE ROW STYLE REUSED FOUR TIMES.
 * Reported directly: a section read as no different from the lesson under
 * it, and a topic's own quiz sat at the same indent as the topic rather
 * than looking like it belonged to it. A section is a heading a visitor
 * never clicks; a lesson is the thing they open; a topic and its quiz are
 * both subordinate to that lesson, one step further indented again. Size,
 * weight and a left rule carry that now - never a colour, which is the
 * one thing this file still refuses to declare (see the file docblock).
 */
.tg-course-content__section {
    margin: 2.5rem 0 1rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding-top: 1.25rem;
}

.tg-course-content__section:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.tg-course-content__section > summary {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    cursor: pointer;

    /* Deliberately bigger than a lesson row (1.35em vs 1.05em below) - a
       section is the one row on this page nothing links to, so it has to
       read as a heading from size alone, not just from being first. */
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: -0.01em;
    list-style: none; /* the marker below replaces the default triangle in every browser that honours this */
}

.tg-course-content__section > summary::-webkit-details-marker {
    display: none;
}

.tg-course-content__section > summary::before {
    display: inline-block;
    flex: 0 0 auto;
    content: "\25BC";
    font-size: 0.55em;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

.tg-course-content__section:not([open]) > summary::before {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .tg-course-content__section > summary::before {
        transition: none;
    }
}

/*
 * A topic: a smaller heading INSIDE its section, indented, with a left rule
 * so its lessons read as belonging to it and not to the section around it.
 */
.tg-course-content__topic {
    margin: 1rem 0 0.75rem 0.25rem;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in srgb, currentColor 18%, transparent);
}

.tg-course-content__topic > summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 700;
    list-style: none;
}

.tg-course-content__topic > summary::-webkit-details-marker {
    display: none;
}

.tg-course-content__topic > summary::before {
    display: inline-block;
    flex: 0 0 auto;
    content: "\25BC";
    font-size: 0.55em;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

.tg-course-content__topic:not([open]) > summary::before {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .tg-course-content__topic > summary::before {
        transition: none;
    }
}

.tg-course-content__topic .tg-course-content__lessons {
    margin-top: 0.5rem;
}

/* "Topic" before a topic's name, so it never reads as another section. */
.tg-course-content__kind {
    padding: 0.1em 0.5em;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* "3 lessons · 1 quiz", pushed to the right of the heading. */
.tg-course-content__count {
    margin-left: auto;
    font-size: 0.6em;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.65;
    white-space: nowrap;
}

.tg-course-content__topic .tg-course-content__count {
    font-size: 0.75em;
}

.tg-course-content__section > summary {
    flex-wrap: wrap;
}

.tg-course-content__lessons {
    list-style: none;
    margin: 1.25rem 0 0.5rem;
    padding: 0;
}

.tg-course-content__step {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.tg-course-content__step a {
    /* min-width:0 and wrapping, because these titles are long: "Carbohydrate
       Metabolism: Gluconeogenesis and Glycogen" must not push the completion
       marker off the row. */
    min-width: 0;
    overflow-wrap: break-word;
    text-decoration: none;
    color: inherit;
}

.tg-course-content__step a:hover,
.tg-course-content__step a:focus-visible {
    text-decoration: underline;
}

/*
 * A lesson is the thing you open. Its own size step down from the section
 * above it, and a left rule no other row here carries - the one visual
 * device that says "this, specifically, is what this section contains",
 * distinct from a topic or quiz being subordinate to IT one indent further
 * in.
 */
.tg-course-content__step--lesson {
    padding-left: 0.85rem;
    border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
}

.tg-course-content__step--lesson > a {
    font-size: 1.05em;
    font-weight: 650;
}

.tg-course-content__children > ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
}

.tg-course-content__children .tg-course-content__step {
    padding: 0.5rem 0;
    font-size: 0.92em;
    opacity: 0.9;
}

/*
 * Type markers, as an icon-and-text chip rather than colour.
 *
 * A student scanning a syllabus needs to know which rows are quizzes before
 * clicking. Colour alone would say nothing to a screen reader and nothing to
 * anyone who cannot distinguish it, so the label is real text - the glyph in
 * front of it is decorative and purely reinforcing.
 */
.tg-course-content__step--quiz > a::before,
.tg-course-content__step--topic > a::before {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    flex: 0 0 auto;
    margin-right: 0.4rem;
    padding: 0.15em 0.55em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.tg-course-content__step--quiz > a::before {
    content: "\270E  Quiz";
}

.tg-course-content__step--topic > a::before {
    content: "\25CE  Sub-lesson";
}

.tg-course-content__done {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
}

.tg-course-content__step.is-complete > a {
    opacity: 0.75;
}

.tg-course-content__lock {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.6;
    white-space: nowrap;
}

.tg-course-content__step.is-locked > a {
    opacity: 0.6;
}

.tg-course-content__preview {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

@supports not (color: color-mix(in srgb, currentColor 12%, transparent)) {
    .tg-course-content__preview {
        background: rgba(128, 128, 128, 0.2);
    }
}

/* ---------------------------------------------------------------
   Buy this course
   --------------------------------------------------------------- */

.tg-course-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border: 1px solid currentColor;
    border-radius: 8px;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.tg-course-purchase__note {
    margin: 0;
}

.tg-course-purchase__cta {
    flex: 0 0 auto;
    padding: 0.6em 1.2em;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .tg-course-purchase {
        border-color: rgba(128, 128, 128, 0.35);
        background: rgba(128, 128, 128, 0.08);
    }

    .tg-course-purchase__cta {
        background: rgba(128, 128, 128, 0.18);
    }
}

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

/*
 * color-mix() is well supported but not universal, and every use above is a
 * border or a background that must not become invisible when it is not
 * understood. These fallbacks are declared FIRST in each rule by virtue of
 * this block being last only for readability - @supports not() applies them
 * where color-mix is unavailable.
 */
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .tg-course-infobar {
        border-color: rgba(128, 128, 128, 0.35);
    }

    .tg-course-infobar__bar,
    .tg-course-content__step--quiz > a::before,
    .tg-course-content__step--topic > a::before {
        background: rgba(128, 128, 128, 0.15);
    }

    .tg-course-content__step--quiz > a::before,
    .tg-course-content__step--topic > a::before {
        border-color: rgba(128, 128, 128, 0.3);
    }

    .tg-course-content__step {
        border-bottom-color: rgba(128, 128, 128, 0.2);
    }

    .tg-course-content__section {
        border-top-color: rgba(128, 128, 128, 0.25);
    }

    .tg-course-content__step--lesson {
        border-left-color: rgba(128, 128, 128, 0.4);
    }
}

/* ---------------------------------------------------------------
   What is inside this lesson
   --------------------------------------------------------------- */

/*
 * Rendered on lesson and topic pages, which is why this lives here rather
 * than in step-chrome.css: it reuses the syllabus's own step markup, and one
 * stylesheet describing a step once is what stops the course page and the
 * lesson page drifting into looking like two products.
 */

.tg-step-contents {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.tg-step-contents__title {
    margin: 0 0 0.75rem;
    font-size: 1.1em;
}

@supports not (color: color-mix(in srgb, currentColor 12%, transparent)) {
    .tg-step-contents {
        border-top-color: rgba(128, 128, 128, 0.2);
    }
}

/* ---------------------------------------------------------------
   Accent layer
   ---------------------------------------------------------------
   One accent colour, taken from the theme where it declares one.
   Resolution order:
     1. --tg-brand, set by a site owner on :root (or any ancestor)
     2. the theme's --wp--preset--color--primary
     3. a neutral blue
   To go back to the plain, colour-free look this stylesheet used to have,
   set  --tg-accent: currentColor;  on :root. :where() keeps every rule here
   at zero specificity so a theme or Customizer rule always wins. */

:where(.tg-course-page, .tg-course-content, .tg-course-infobar, .tg-course-purchase, .tg-step-contents,
       .tg-catalog, .tg-step-chrome, .tg-step-sticky, .tg-quiz, .tg-profile, .tg-locked) {
	--tg-accent: var(--tg-brand, var(--wp--preset--color--primary, #2563eb));
	--tg-on-accent: var(--tg-brand-contrast, #fff);
	--tg-ok: #1e8e3e;
	--tg-danger: #b3261e;
	--tg-radius: 10px;
	/* An add-on can set --tg-font; unset, the theme's own font is kept. */
	font-family: var(--tg-font, inherit);
	/* For TEXT: pulled toward the theme's own text colour, so it keeps its
	   contrast on a light theme and a dark one without detecting either. */
	--tg-accent-text: color-mix(in srgb, var(--tg-accent) 70%, currentColor);
	--tg-ok-text: color-mix(in srgb, var(--tg-ok) 65%, currentColor);
	--tg-danger-text: color-mix(in srgb, var(--tg-danger) 65%, currentColor);
}


/* Progress, status and the "continue" action */

.tg-course-infobar {
	border-radius: var(--tg-radius);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.tg-course-infobar__fill {
	background: var(--tg-accent);
}

.tg-course-infobar__status {
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.85em;
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.tg-course-infobar__status--in-progress {
	color: var(--tg-accent-text);
	background: color-mix(in srgb, var(--tg-accent) 14%, transparent);
}

.tg-course-infobar__status--complete {
	color: var(--tg-ok-text);
	background: color-mix(in srgb, var(--tg-ok) 14%, transparent);
}

.tg-course-infobar[data-percent="100"] .tg-course-infobar__fill {
	background: var(--tg-ok);
}

.tg-course-infobar__resume,
.tg-course-purchase__cta {
	padding: 0.6em 1.3em;
	border-radius: 8px;
	background: var(--tg-accent);
	color: var(--tg-on-accent);
	font-weight: 700;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.tg-course-infobar__resume:hover,
.tg-course-infobar__resume:focus-visible,
.tg-course-purchase__cta:hover,
.tg-course-purchase__cta:focus-visible {
	filter: brightness(1.1);
	color: var(--tg-on-accent);
}

.tg-course-purchase {
	border-radius: var(--tg-radius);
	border-left: 4px solid var(--tg-accent);
}

/* Syllabus: a finished lesson says so in green, a free preview in the accent */

.tg-course-content__done {
	color: var(--tg-ok-text);
	opacity: 1;
}

.tg-course-content__done::before {
	content: "\2713\00a0";
}

.tg-course-content__preview {
	color: var(--tg-accent-text);
	background: color-mix(in srgb, var(--tg-accent) 14%, transparent);
}

.tg-course-content__step a:hover,
.tg-course-content__step a:focus-visible {
	background: color-mix(in srgb, var(--tg-accent) 8%, transparent);
}

.tg-course-content__step--lesson {
	border-left-color: color-mix(in srgb, var(--tg-accent) 55%, transparent);
}

.tg-course-content__step--lesson.is-complete {
	border-left-color: var(--tg-ok);
}

.tg-course-content__step a:focus-visible {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

/* The "Quiz" and "Sub-lesson" tags read as tags in the accent, not as grey boxes */

.tg-course-content__step--quiz > a::before {
	color: var(--tg-accent-text);
	border-color: color-mix(in srgb, var(--tg-accent) 40%, transparent);
	background: color-mix(in srgb, var(--tg-accent) 10%, transparent);
}

/* Keep the action on the right of the progress card rather than wrapping under it. */
.tg-course-infobar__resume {
    margin-left: auto;
}

@media (max-width: 520px) {
    .tg-course-infobar__resume {
        flex: 1 1 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* You are here / Up next */

.tg-course-content__step.is-current > a {
    font-weight: 700;
}

.tg-course-content__step.is-current {
    background: color-mix(in srgb, var(--tg-accent) 10%, transparent);
    border-left-color: var(--tg-accent);
}

.tg-course-content__here,
.tg-course-content__next {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tg-course-content__here {
    background: var(--tg-accent);
    color: var(--tg-on-accent);
}

.tg-course-content__next {
    color: var(--tg-accent-text);
    background: color-mix(in srgb, var(--tg-accent) 14%, transparent);
}

.tg-course-content__here + .tg-course-content__done,
.tg-course-content__next + .tg-course-content__done,
.tg-course-content__here + .tg-course-content__lock,
.tg-course-content__next + .tg-course-content__lock {
    margin-left: 0.5rem;
}

/* Collapse all / Expand all (assets/syllabus.js) */

.tg-course-content__toggle {
    display: block;
    margin: 0 0 0.5rem auto;
    padding: 0.25em 0.8em;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
}

.tg-course-content__toggle:hover,
.tg-course-content__toggle:focus-visible {
    border-color: var(--tg-accent);
    outline: none;
}

/* ---------------------------------------------------------------
   Tiles
   ---------------------------------------------------------------
   The default layout (data-layout="tiles" on the syllabus and on a lesson's
   "In this lesson" list): each lesson is a card, and the topics and quizzes
   that belong to it sit inside that card, so a quiz reads as attached to its
   lesson instead of floating below it. data-layout="list" keeps the plain
   rows above.

   Tunable from outside with variables, all optional:
     --tg-tile-min      narrowest a tile gets before the grid drops a column
     --tg-tile-gap      space between tiles
     --tg-tile-bg       tile background
     --tg-tile-border   tile border colour
     --tg-tile-shadow   resting shadow (hover adds a lift)
   Set on :root (the brand colour rule does this), never declared here, so a
   value set higher up is not overridden by a default.  */

[data-layout="tiles"] .tg-course-content__lessons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tg-tile-min, 15rem)), 1fr));
	gap: var(--tg-tile-gap, 1rem);
	margin: 1rem 0 0.5rem;
}

[data-layout="tiles"] .tg-course-content__tile {
	display: flex;
	min-width: 0;
	list-style: none;
}

[data-layout="tiles"] .tg-course-content__unit {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--tg-tile-border, color-mix(in srgb, currentColor 14%, transparent));
	border-top: 3px solid color-mix(in srgb, var(--tg-accent) 55%, transparent);
	border-radius: var(--tg-radius);
	background: var(--tg-tile-bg, color-mix(in srgb, currentColor 3%, transparent));
	box-shadow: var(--tg-tile-shadow, 0 1px 2px color-mix(in srgb, currentColor 8%, transparent));
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

[data-layout="tiles"] .tg-course-content__unit:hover,
[data-layout="tiles"] .tg-course-content__unit:focus-within {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--tg-accent) 45%, transparent);
	box-shadow: 0 6px 18px color-mix(in srgb, currentColor 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	[data-layout="tiles"] .tg-course-content__unit {
		transition: none;
	}

	[data-layout="tiles"] .tg-course-content__unit:hover,
	[data-layout="tiles"] .tg-course-content__unit:focus-within {
		transform: none;
	}
}

/* The step inside a tile: title on top, then its badges. */
[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	padding: 1rem 1rem 0.85rem;
	border: 0;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step > a {
	flex: 1 1 100%;
	font-size: 1.05em;
	font-weight: 650;
	line-height: 1.3;
}

/* The whole top of the tile is the link, not just the title text. */
[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step {
	position: relative;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step > a:hover,
[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step > a:focus-visible {
	background: none;
	text-decoration: none;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step > a:focus-visible {
	outline: none;
}

[data-layout="tiles"] .tg-course-content__unit:has(> .tg-course-content__step > a:focus-visible) {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step--lesson {
	border-left: 0;
}

/* Status chips sit at the left under the title, not pushed to the far edge. */
[data-layout="tiles"] .tg-course-content__unit .tg-course-content__done,
[data-layout="tiles"] .tg-course-content__unit .tg-course-content__lock,
[data-layout="tiles"] .tg-course-content__unit .tg-course-content__preview,
[data-layout="tiles"] .tg-course-content__unit .tg-course-content__here,
[data-layout="tiles"] .tg-course-content__unit .tg-course-content__next {
	margin-left: 0;
}

[data-layout="tiles"] .tg-course-content__unit .tg-course-content__done {
	padding: 0.1em 0.55em;
	border-radius: 999px;
	opacity: 1;
	background: color-mix(in srgb, var(--tg-ok) 14%, transparent);
}

/* The topics and quizzes that belong to the lesson, inside its tile. */
[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__children {
	margin-top: auto;
	border-top: 1px solid var(--tg-tile-border, color-mix(in srgb, currentColor 14%, transparent));
	background: color-mix(in srgb, currentColor 4%, transparent);
	list-style: none;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__step + .tg-course-content__children {
	margin-top: 0;
}

[data-layout="tiles"] .tg-course-content__unit > .tg-course-content__children > ul {
	margin: 0;
	padding: 0.25rem 1rem;
}

[data-layout="tiles"] .tg-course-content__children .tg-course-content__step {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	opacity: 1;
}

[data-layout="tiles"] .tg-course-content__children .tg-course-content__step:last-child {
	border-bottom: 0;
}

/* A nested group (a topic's own quizzes) just indents a little. */
[data-layout="tiles"] .tg-course-content__children .tg-course-content__children > ul {
	padding-left: 1rem;
}

/* Colour tells the story at a glance, as well as the words. */
[data-layout="tiles"] .tg-course-content__unit:has(> .tg-course-content__step--lesson.is-complete) {
	border-top-color: var(--tg-ok);
}

[data-layout="tiles"] .tg-course-content__unit:has(> .is-locked) {
	border-top-color: color-mix(in srgb, currentColor 25%, transparent);
	opacity: 0.8;
}

[data-layout="tiles"] .tg-course-content__unit:has(> .is-current) {
	border-color: var(--tg-accent);
	border-top-color: var(--tg-accent);
	box-shadow: 0 0 0 1px var(--tg-accent);
	background: color-mix(in srgb, var(--tg-accent) 7%, transparent);
}

[data-layout="tiles"] .tg-course-content__unit > .is-current {
	background: none;
}

[data-layout="tiles"] .tg-course-content__unit:has(> .is-next) {
	border-top-color: var(--tg-accent);
}

/* A lesson's own tile heads a topic/section block, so give sections air. */
[data-layout="tiles"] .tg-course-content__section {
	margin-top: 2rem;
}

/* Phones: one column, a little tighter. */
@media (max-width: 520px) {
	[data-layout="tiles"] .tg-course-content__lessons {
		grid-template-columns: 1fr;
	}
}

/* On a lesson page the list sits inside the page, so it can be quieter. */
.tg-step-contents[data-layout="tiles"] .tg-course-content__unit {
	box-shadow: none;
}