/**
 * Embedded surfaces — the components that exist ONLY outside a Learnomy route.
 *
 * Widgets, shortcodes and blocks render markup that no route template emits
 * (`.lrn-widget-list`, `.lrn-instructor-card`, `.lrn-quiz-embed`,
 * `.lrn-certificate-badge`, the block wrappers), so those class names had no
 * rules anywhere in the plugin: a sidebar widget or a `[learnomy_instructor]`
 * card fell back to whatever the active theme happened to do with a `<ul>`.
 *
 * This sheet is the home for exactly those components. It ships with every
 * embedded bundle (Template_Loader::SURFACE_BUNDLES) and with nothing else —
 * route pages never render this markup.
 *
 * Everything is token-driven (`--lrn-*`), so it inherits the theme's palette in
 * light and dark alike, and logical properties (`margin-inline`, `padding-inline`)
 * keep it correct in RTL.
 *
 * @package Learnomy
 */

/* --------------------------------------------------------------------------
   Shared reset for embedded roots

   A route wraps its template in `.lrn-app`, which owns the base reset. Embedded
   markup lands directly in theme content, so each embedded root carries the one
   rule the components actually depend on.
   -------------------------------------------------------------------------- */

.lrn-widget-list,
.lrn-widget-progress,
.lrn-instructor-widget,
.lrn-course-search,
.lrn-search-form,
.lrn-instructor-card,
.lrn-quiz-embed,
.lrn-certificate-badge,
.lrn-progress-bar-block,
.lrn-my-progress,
.lrn-student-dashboard {
	box-sizing:  border-box;
	font-family: var(--lrn-font);
	font-size:   var(--lrn-text-base);
	line-height: var(--lrn-leading-normal);
	color:       var(--lrn-text);
}

.lrn-widget-list *,
.lrn-widget-progress *,
.lrn-instructor-widget *,
.lrn-course-search *,
.lrn-search-form *,
.lrn-instructor-card *,
.lrn-quiz-embed *,
.lrn-certificate-badge *,
.lrn-progress-bar-block *,
.lrn-my-progress *,
.lrn-student-dashboard * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Widget lists — Popular / Recent Courses, Course Categories
   -------------------------------------------------------------------------- */

.lrn-widget-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.lrn-widget-list__item {
	display:        flex;
	flex-wrap:      wrap;
	align-items:    baseline;
	gap:            var(--lrn-sp-1) var(--lrn-sp-2);
	padding-block:  var(--lrn-sp-2);
	border-bottom:  1px solid var(--lrn-divider);
}

.lrn-widget-list__item:last-child {
	border-bottom: 0;
}

.lrn-widget-list__link {
	flex:            1 1 auto;
	min-width:       0;
	color:           var(--lrn-text);
	font-weight:     var(--lrn-weight-medium);
	line-height:     var(--lrn-leading-tight);
	text-decoration: none;
}

.lrn-widget-list__link:hover,
.lrn-widget-list__link:focus-visible {
	color: var(--lrn-accent);
}

.lrn-widget-list__meta,
.lrn-widget-list__count {
	flex:      0 0 auto;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-xs);
}

/* --------------------------------------------------------------------------
   My Course Progress widget
   -------------------------------------------------------------------------- */

.lrn-widget-progress__item {
	display:        flex;
	flex-wrap:      wrap;
	align-items:    center;
	gap:            var(--lrn-sp-1) var(--lrn-sp-2);
	padding-block:  var(--lrn-sp-2-5);
}

.lrn-widget-progress__item .lrn-widget-list__link {
	flex-basis: 100%;
}

.lrn-widget-progress__item .lrn-progress-bar {
	flex:      1 1 auto;
	min-width: 0;
}

.lrn-widget-progress__pct {
	flex:        0 0 auto;
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-xs);
	font-weight: var(--lrn-weight-medium);
	font-variant-numeric: tabular-nums;
}

/* A sidebar column is narrow — the standard 6px track reads as a slab there. */
.lrn-progress-bar--xs {
	height: var(--lrn-sp-1);
}

/* --------------------------------------------------------------------------
   Featured Instructor widget
   -------------------------------------------------------------------------- */

.lrn-instructor-widget {
	display:     flex;
	align-items: flex-start;
	gap:         var(--lrn-sp-3);
}

.lrn-instructor-widget__avatar-wrap {
	flex: 0 0 auto;
}

.lrn-instructor-widget__avatar,
.lrn-instructor-widget .avatar {
	display:       block;
	border-radius: var(--lrn-radius-full);
}

.lrn-instructor-widget__info {
	min-width: 0;
}

.lrn-instructor-widget__name {
	display:     block;
	font-weight: var(--lrn-weight-semibold);
	line-height: var(--lrn-leading-tight);
}

.lrn-instructor-widget__bio {
	margin:    var(--lrn-sp-1) 0 0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-instructor-widget__courses {
	display:   block;
	margin-block-start: var(--lrn-sp-1);
	color:     var(--lrn-text-tertiary);
	font-size: var(--lrn-text-xs);
}

/* --------------------------------------------------------------------------
   Search — the Course Search widget and the [learnomy_search] form

   Two markups, one look: a field and a button on one row that stack under the
   phone breakpoint rather than squeezing the input to nothing.
   -------------------------------------------------------------------------- */

.lrn-course-search__inner,
.lrn-search-form__row {
	display: flex;
	gap:     var(--lrn-sp-2);
}

.lrn-course-search__input,
.lrn-search-form__input {
	flex:          1 1 auto;
	min-width:     0;
	min-height:    var(--lrn-touch-min);
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	background:    var(--lrn-bg);
	color:         var(--lrn-text);
	border:        1px solid var(--lrn-border-heavy);
	border-radius: var(--lrn-radius-md);
	font-family:   var(--lrn-font);
	font-size:     var(--lrn-text-base);
}

.lrn-course-search__input:focus,
.lrn-search-form__input:focus {
	outline:      2px solid var(--lrn-accent);
	outline-offset: 1px;
	border-color: var(--lrn-accent);
}

.lrn-course-search__btn,
.lrn-search-form__btn {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   [learnomy_instructor] card
   -------------------------------------------------------------------------- */

.lrn-instructor-card {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--lrn-sp-4);
	padding:       var(--lrn-sp-5);
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
}

.lrn-instructor-card__avatar-wrap {
	flex: 0 0 auto;
}

.lrn-instructor-card__avatar {
	display:       block;
	border-radius: var(--lrn-radius-full);
}

/* Was `.lrn-instructor-card__body`, which no renderer has ever emitted - both
   instructor-card and instructor-grid print `__info`. So `min-width: 0` never
   reached the flex child and a long display name or bio pushed the card wider
   than its grid track instead of wrapping. */
.lrn-instructor-card__info {
	min-width: 0;
}

.lrn-instructor-card__name {
	margin:      0;
	font-size:   var(--lrn-text-md);
	font-weight: var(--lrn-weight-semibold);
	line-height: var(--lrn-leading-tight);
}

.lrn-instructor-card__name a {
	color:           var(--lrn-text);
	text-decoration: none;
}

.lrn-instructor-card__name a:hover,
.lrn-instructor-card__name a:focus-visible {
	color: var(--lrn-accent);
}

.lrn-instructor-card__meta {
	margin:    var(--lrn-sp-1) 0 0;
	color:     var(--lrn-text-tertiary);
	font-size: var(--lrn-text-xs);
}

.lrn-instructor-card__bio {
	margin:    var(--lrn-sp-2) 0 var(--lrn-sp-3);
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

/* --------------------------------------------------------------------------
   [learnomy_quiz] embed card
   -------------------------------------------------------------------------- */

.lrn-quiz-embed {
	padding:       var(--lrn-sp-5);
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
}

.lrn-quiz-embed__title {
	margin:      0;
	font-size:   var(--lrn-text-md);
	font-weight: var(--lrn-weight-semibold);
	line-height: var(--lrn-leading-tight);
}

.lrn-quiz-embed__description {
	margin:    var(--lrn-sp-2) 0 0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-quiz-embed__meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--lrn-sp-2) var(--lrn-sp-4);
	margin:    var(--lrn-sp-3) 0 var(--lrn-sp-4);
}

.lrn-quiz-embed__meta-item {
	color:     var(--lrn-text-tertiary);
	font-size: var(--lrn-text-xs);
}

/* --------------------------------------------------------------------------
   Quiz block card — the rules list and action row the player sheet never had
   (the player styles the RUNNER, which is a different surface entirely).
   -------------------------------------------------------------------------- */

.lrn-quiz__rules {
	list-style: none;
	margin:     var(--lrn-sp-3) 0 var(--lrn-sp-4);
	padding:    0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--lrn-sp-2) var(--lrn-sp-4);
}

.lrn-quiz__rule {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-quiz__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--lrn-sp-2);
}

.lrn-quiz__login-notice {
	margin: 0;
}

/* --------------------------------------------------------------------------
   [learnomy_certificate_verify] badge
   -------------------------------------------------------------------------- */

.lrn-certificate-badge {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-4);
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
}

.lrn-certificate-badge--valid {
	background:   var(--lrn-success-bg);
	border-color: var(--lrn-success);
}

.lrn-certificate-badge--invalid {
	background:   var(--lrn-danger-bg);
	border-color: var(--lrn-danger);
}

.lrn-certificate-badge__icon {
	flex: 0 0 auto;
}

.lrn-certificate-badge--valid .lrn-certificate-badge__icon {
	color: var(--lrn-success);
}

.lrn-certificate-badge--invalid .lrn-certificate-badge__icon {
	color: var(--lrn-danger);
}

.lrn-certificate-badge__status {
	margin:      0;
	font-weight: var(--lrn-weight-semibold);
	line-height: var(--lrn-leading-tight);
}

.lrn-certificate-badge__detail {
	margin:    var(--lrn-sp-1) 0 0;
	font-size: var(--lrn-text-sm);
}

.lrn-certificate-badge__date {
	margin:    var(--lrn-sp-1) 0 0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-xs);
}

/* --------------------------------------------------------------------------
   Certificate block
   -------------------------------------------------------------------------- */

.lrn-certificate__badge {
	margin-block-end: var(--lrn-sp-3);
}

.lrn-certificate__details p {
	margin:    0 0 var(--lrn-sp-2);
	font-size: var(--lrn-text-sm);
}

.lrn-certificate__uuid {
	color: var(--lrn-text-tertiary);
}

.lrn-certificate--revoked {
	border-color: var(--lrn-warn);
}

/* --------------------------------------------------------------------------
   Progress-bar block
   -------------------------------------------------------------------------- */

.lrn-progress-bar-block__header {
	display:          flex;
	flex-wrap:        wrap;
	align-items:      baseline;
	justify-content:  space-between;
	gap:              var(--lrn-sp-2);
	margin-block-end: var(--lrn-sp-2);
}

.lrn-progress-bar-block__course {
	font-weight: var(--lrn-weight-medium);
}

.lrn-progress-bar-block__pct {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   My Progress + Student Dashboard blocks

   Both render a stack of course rows: title, the canonical progress bar, a
   percentage. One rule set, two block wrappers.
   -------------------------------------------------------------------------- */

.lrn-my-progress__item,
.lrn-student-dashboard__item {
	display:               grid;
	grid-template-columns: 1fr auto;
	align-items:           center;
	gap:                   var(--lrn-sp-2) var(--lrn-sp-3);
	padding:               var(--lrn-sp-4);
	margin-block-end:      var(--lrn-sp-3);
}

.lrn-my-progress__course-title,
.lrn-student-dashboard__course-title {
	grid-column:     1 / -1;
	color:           var(--lrn-text);
	font-weight:     var(--lrn-weight-medium);
	line-height:     var(--lrn-leading-tight);
	text-decoration: none;
}

.lrn-my-progress__course-title:hover,
.lrn-my-progress__course-title:focus-visible,
.lrn-student-dashboard__course-title:hover,
.lrn-student-dashboard__course-title:focus-visible {
	color: var(--lrn-accent);
}

.lrn-my-progress__pct,
.lrn-student-dashboard__pct {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
	font-variant-numeric: tabular-nums;
}

.lrn-my-progress__view-all {
	display:   inline-block;
	margin-block-start: var(--lrn-sp-2);
	font-size: var(--lrn-text-sm);
}

.lrn-my-progress__all-done {
	color: var(--lrn-text-secondary);
}

.lrn-student-dashboard__header {
	display:          flex;
	flex-wrap:        wrap;
	align-items:      baseline;
	justify-content:  space-between;
	gap:              var(--lrn-sp-2);
	margin-block-end: var(--lrn-sp-4);
}

.lrn-student-dashboard__greeting {
	margin:      0;
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
}

.lrn-student-dashboard__count {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

.lrn-student-dashboard__thumbnail {
	grid-column: 1 / -1;
}

.lrn-student-dashboard__thumbnail img {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: var(--lrn-radius-md);
}

/* --------------------------------------------------------------------------
   [learnomy/instructor-grid] - the set form of the card above
   -------------------------------------------------------------------------- */

/* The single card is a horizontal row, which is right when it sits alone in a
   sidebar and wrong in a four-track grid: at 280px an avatar beside text
   leaves the name about eleven characters. In a grid the card stacks and
   centres, which is also what a "meet the team" row is expected to look like.
   The grid itself, its column counts and its breakpoints are .lrn-grid's -
   nothing here re-implements them. */
.lrn-instructor-grid__list > .lrn-instructor-card {
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

.lrn-instructor-grid__list > .lrn-instructor-card .lrn-instructor-card__meta {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             var(--lrn-sp-2);
}

.lrn-instructor-grid__list .lrn-instructor-card__bio {
	margin:    var(--lrn-sp-2) 0 0;
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}

/* A two-line bio on one card and a four-line bio on the next leaves the meta
   rows ragged across the row, which reads as broken alignment rather than as
   different people. Pin the card body to the bottom instead. */
.lrn-instructor-grid__list > .lrn-instructor-card {
	justify-content: flex-start;
}

.lrn-instructor-grid__list .lrn-instructor-card__info {
	display:        flex;
	flex-direction: column;
	flex:           1 1 auto;
	width:          100%;
}

.lrn-instructor-grid__list .lrn-instructor-card__meta {
	margin-block-start: auto;
	padding-block-start: var(--lrn-sp-3);
}

/* --------------------------------------------------------------------------
   Phone

   A sidebar is already narrow; below this width the two-up rows have nowhere
   left to go and read better stacked.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

	/* The grid is single-column from here down, so the card has the full width
	   back and the horizontal layout reads better than a tall stack. This must
	   fire at the SAME width the grid collapses at - at 480px there was a band
	   between 481 and 640 showing one wide column with a narrow centred card. */
	.lrn-instructor-grid__list > .lrn-instructor-card {
		flex-direction: row;
		align-items:    flex-start;
		text-align:     start;
	}

	.lrn-instructor-grid__list > .lrn-instructor-card .lrn-instructor-card__meta {
		justify-content: flex-start;
	}

	.lrn-course-search__inner,
	.lrn-search-form__row {
		flex-direction: column;
	}

	.lrn-course-search__btn,
	.lrn-search-form__btn {
		width: 100%;
	}

	.lrn-instructor-card {
		flex-direction: column;
	}
}