/**
 * Learnomy — Dashboards stylesheet.
 *
 * Page-specific styles for the three dashboard routes:
 *   • student-dashboard.php   (route 'student-dashboard')   — /my-courses/
 *   • instructor-dashboard.php (route 'instructor-dashboard') — /instructor/
 *   • instructor-profile.php   (route 'instructor-profile')   — /instructor/{slug}/
 *
 * Loaded only on those routes via Template_Loader::enqueue_assets() so
 * the other ~10 frontend routes don't pay for the KPI / certificate /
 * profile-header CSS that they never render.
 *
 * Shared primitives consumed but not owned here:
 *   .lrn-card, .lrn-btn*, .lrn-badge*, .lrn-grid, .lrn-table*,
 *   .lrn-empty-state*, .lrn-activity-list*, .lrn-tab-nav*,
 *   .lrn-tab-panel, .lrn-course-card*
 * Those live in learnomy.css because every route relies on them.
 *
 * Instructor-only widgets that remain in learnomy.css for now (own slice
 * candidates): .lrn-funnel*, .lrn-earnings-summary*, .lrn-rating-cell*,
 * .lrn-engagement-alerts, .lrn-alert-card*, .lrn-review-item*.
 *
 * Responsive contract: exactly two @media queries at the bottom of the
 * file — 1024px (tablet ↔ desktop) and 640px (mobile). No intermediate
 * breakpoints. Consolidates four legacy breakpoints (480 / 640 / 768 /
 * 1024-1439) that previously targeted .lrn-stats-row + dashboard headers.
 *
 * @package Learnomy
 */

/* ==========================================================================
   Dashboard header — avatar + greeting + (instructor) action buttons
   ========================================================================== */

.lrn-dashboard__header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   var(--lrn-sp-6);
}

.lrn-dashboard__welcome {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-4);
}

.lrn-dashboard__avatar {
	width:         64px;
	height:        64px;
	border-radius: 50%;
	flex-shrink:   0;
}

.lrn-dashboard__greeting {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-1);
}

.lrn-dashboard__subtitle {
	color:  var(--lrn-text-secondary);
	margin: 0;
}

/* ==========================================================================
   Stats row — KPI tiles
   ========================================================================== */

/* 2 columns on tablet (the lowest reasonable width before mobile collapse).
   Wide desktop (1024px+) bumps to 4 columns; mobile collapses to 1. */
.lrn-stats-row {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--lrn-sp-4);
	margin-bottom:         var(--lrn-sp-8);
}

.lrn-stat-card {
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	padding:       var(--lrn-sp-5);
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	box-shadow:    var(--lrn-shadow-sm);
}

.lrn-stat-card svg,
.lrn-stat-card__icon {
	width:       var(--lrn-icon-md);
	height:      var(--lrn-icon-md);
	color:       var(--lrn-accent);
	flex-shrink: 0;
}

.lrn-stat-card__content {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.lrn-stat-card strong,
.lrn-stat-card__count {
	font-size:   var(--lrn-text-xl);
	font-weight: var(--lrn-weight-semibold);
}

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

/* ==========================================================================
   Dashboard sections — vertical rhythm for each labelled section
   ========================================================================== */

.lrn-dashboard__section {
	margin-bottom: var(--lrn-sp-8);
}

.lrn-dashboard__section-title {
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-4);
}

/* Uniform shell for single-content dashboard widgets (announcements,
   recent activity, quiz scores, membership, …). Multi-item grids —
   courses, certificates — stay naked because each item already has its
   own card. `--flush` zeroes the padding so a wrapped table can hug
   the edge. Pulse-on-hover is suppressed because this is a static
   container, not an interactive surface. */
.lrn-dashboard__section-card:hover {
	box-shadow:   var(--lrn-shadow-sm);
	border-color: var(--lrn-border);
}

.lrn-dashboard__section-card--flush {
	padding:  0;
	overflow: hidden;
}

.lrn-dashboard__section-card .lrn-activity-list {
	margin: 0;
}

/* The wrapped table has its own padding inside `.lrn-table-wrap`, so the
   card frame just provides the visual border + radius. */
.lrn-dashboard__section-card--flush .lrn-table-wrap {
	border:        0;
	border-radius: 0;
}

/* ==========================================================================
   Continue-learning hero (priority=5, lives above the stats row visually
   because it's the first widget in the rendered list).
   ========================================================================== */

.lrn-dashboard__hero {
	margin-bottom: var(--lrn-sp-8);
}

.lrn-resume-hero {
	display:        grid;
	grid-template-columns: 1fr auto;
	gap:            var(--lrn-sp-5);
	align-items:    center;
	padding:        var(--lrn-sp-6) var(--lrn-sp-7);
	border-radius:  var(--lrn-radius-lg);
	background:     linear-gradient(
		135deg,
		color-mix(in srgb, var(--lrn-accent) 10%, var(--lrn-bg)),
		var(--lrn-bg)
	);
	border:         1px solid var(--lrn-border);
}

.lrn-resume-hero__eyebrow {
	font-size:      var(--lrn-text-xs);
	font-weight:    var(--lrn-weight-semibold);
	color:          var(--lrn-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin:         0 0 var(--lrn-sp-1);
}

.lrn-resume-hero__title {
	font-size:    var(--lrn-text-xl);
	font-weight:  var(--lrn-weight-semibold);
	margin:       0 0 var(--lrn-sp-2);
	color:        var(--lrn-text);
}

.lrn-resume-hero__meta {
	margin: 0;
	color:  var(--lrn-text-secondary);
}

.lrn-resume-hero__progress {
	margin-top:    var(--lrn-sp-3);
	height:        6px;
	border-radius: 3px;
	background:    color-mix(in srgb, var(--lrn-accent) 18%, transparent);
	overflow:      hidden;
}

.lrn-resume-hero__progress-fill {
	display:    block;
	height:     100%;
	width:      var(--pct, 0%);
	background: var(--lrn-accent);
	transition: width var(--lrn-dur) var(--lrn-ease);
}

.lrn-resume-hero__actions {
	display: flex;
	gap:     var(--lrn-sp-2);
}

@media (max-width: 600px) {
	.lrn-resume-hero {
		grid-template-columns: 1fr;
		padding: var(--lrn-sp-5);
	}
}

/* Certificate card variant for orphan rows — visually deprioritized. */
.lrn-certificate-card--archived {
	opacity: 0.7;
}

/* ==========================================================================
   Inline broadcast form — instructor + space-owner widgets share this
   ========================================================================== */

.lrn-broadcast-form__intro {
	margin: 0 0 var(--lrn-sp-3);
	color:  var(--lrn-text-secondary);
}

.lrn-broadcast-form__form {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-3);
}

.lrn-broadcast-form__actions {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             var(--lrn-sp-3);
	flex-wrap:       wrap;
}

.lrn-broadcast-form__email-toggle {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-sm);
}

.lrn-broadcast-form__status {
	margin:        0;
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
	font-size:     var(--lrn-text-sm);
}

.lrn-broadcast-form__status--info {
	background: color-mix(in srgb, var(--lrn-accent) 10%, transparent);
	color:      var(--lrn-text);
}

.lrn-broadcast-form__status--success {
	background: color-mix(in srgb, var(--lrn-success, var(--lrn-accent)) 14%, transparent);
	color:      var(--lrn-text);
}

.lrn-broadcast-form__status--error {
	background: color-mix(in srgb, var(--lrn-danger) 14%, transparent);
	color:      var(--lrn-danger);
}

/* ==========================================================================
   Announcements compose widget (instructor + space-owner variants share)
   ========================================================================== */

.lrn-announcements-widget__heading {
	margin:      var(--lrn-sp-4) 0 var(--lrn-sp-2);
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lrn-announcements-widget__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-3);
}

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

.lrn-announcements-widget__icon {
	flex:   0 0 auto;
	width:  18px;
	height: 18px;
	color:  var(--lrn-accent);
	margin-top: 2px;
}

.lrn-announcements-widget__body {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	flex-direction: column;
}

.lrn-announcements-widget__title {
	font-weight: var(--lrn-weight-medium);
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrn-announcements-widget__meta {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

.lrn-announcements-widget__empty {
	margin: var(--lrn-sp-3) 0 0;
	color:  var(--lrn-text-secondary);
}

/* ==========================================================================
   Student streak widget — small motivational header above today-agenda
   ========================================================================== */

.lrn-streak {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-3);
	padding:     var(--lrn-sp-3) var(--lrn-sp-4);
	border-radius: var(--lrn-radius-md);
	background:    color-mix(in srgb, var(--lrn-warn) 12%, var(--lrn-bg));
	border:        1px solid color-mix(in srgb, var(--lrn-warn) 30%, var(--lrn-border));
	margin-bottom: var(--lrn-sp-4);
}

.lrn-streak__icon {
	flex:   0 0 auto;
	width:  24px;
	height: 24px;
	color:  var(--lrn-warn);
}

.lrn-streak__body {
	display:        flex;
	flex-direction: column;
}

.lrn-streak__count {
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
}

.lrn-streak__flavor {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

/* ==========================================================================
   Student "Today's plan" agenda widget
   ========================================================================== */

.lrn-today-agenda {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-3);
}

.lrn-today-agenda__link {
	display:        flex;
	align-items:    center;
	gap:            var(--lrn-sp-3);
	color:          var(--lrn-text);
	text-decoration: none;
	padding:        var(--lrn-sp-2) 0;
}

.lrn-today-agenda__link:hover:not(.lrn-today-agenda__link--inert) .lrn-today-agenda__title {
	color: var(--lrn-accent);
}

.lrn-today-agenda__icon {
	flex:   0 0 auto;
	width:  18px;
	height: 18px;
	color:  var(--lrn-text-secondary);
}

.lrn-today-agenda__item--assignment .lrn-today-agenda__icon { color: var(--lrn-accent); }
.lrn-today-agenda__item--drip       .lrn-today-agenda__icon { color: var(--lrn-warn); }
.lrn-today-agenda__item--cohort     .lrn-today-agenda__icon { color: var(--lrn-success, var(--lrn-accent)); }

.lrn-today-agenda__body {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	flex-direction: column;
}

.lrn-today-agenda__title {
	font-weight: var(--lrn-weight-medium);
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrn-today-agenda__subtitle {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

.lrn-today-agenda__time {
	flex:        0 0 auto;
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-accent);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Instructor "Students at Risk" widget
   ========================================================================== */

.lrn-at-risk-list {
	list-style: none;
	margin:     0 0 var(--lrn-sp-3);
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-3);
}

.lrn-at-risk-list__item {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-3);
}

.lrn-at-risk-list__avatar {
	flex:         0 0 auto;
	width:        32px;
	height:       32px;
	border-radius: 50%;
}

.lrn-at-risk-list__body {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	flex-direction: column;
}

.lrn-at-risk-list__name {
	font-weight: var(--lrn-weight-medium);
	color:       var(--lrn-text);
}

.lrn-at-risk-list__course {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

.lrn-at-risk-list__course a {
	color: inherit;
	text-decoration: none;
}

.lrn-at-risk-list__course a:hover {
	color: var(--lrn-accent);
}

.lrn-at-risk-list__signal {
	flex:        0 0 auto;
	font-size:   var(--lrn-text-xs);
	color:       var(--lrn-warn);
	font-weight: var(--lrn-weight-semibold);
}

/* ==========================================================================
   Instructor revenue-trend widget (CSS-only bar chart, no JS lib)
   ========================================================================== */

.lrn-revenue-trend__header {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	gap:             var(--lrn-sp-3);
	margin-bottom:   var(--lrn-sp-3);
}

.lrn-revenue-trend__total {
	font-size:   var(--lrn-text-2xl, var(--lrn-text-xl));
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-accent);
	font-variant-numeric: tabular-nums;
}

.lrn-revenue-trend__total-label {
	display:    block;
	font-size:  var(--lrn-text-xs);
	color:      var(--lrn-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

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

.lrn-revenue-trend__bars {
	list-style: none;
	margin:     0 0 var(--lrn-sp-2);
	padding:    0;
	display:    flex;
	align-items: flex-end;
	gap:        4px;
	height:     80px;
}

.lrn-revenue-trend__day {
	flex:    1 1 0;
	height:  100%;
	display: flex;
	align-items: flex-end;
}

.lrn-revenue-trend__bar {
	display:       block;
	width:         100%;
	height:        var(--pct, 1%);
	background:    var(--lrn-accent);
	border-radius: 2px 2px 0 0;
	transition:    height var(--lrn-dur) var(--lrn-ease);
}

.lrn-revenue-trend__day:hover .lrn-revenue-trend__bar {
	background: color-mix(in srgb, var(--lrn-accent) 80%, black);
}

.lrn-revenue-trend__legend {
	display:         flex;
	justify-content: space-between;
	font-size:       var(--lrn-text-xs);
	color:           var(--lrn-text-secondary);
}

/* ==========================================================================
   Instructor Q&A inbox widget
   ========================================================================== */

.lrn-qa-inbox {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-4);
}

.lrn-qa-inbox__item {
	display:         flex;
	align-items:     flex-start;
	gap:             var(--lrn-sp-3);
	padding-bottom:  var(--lrn-sp-3);
	border-bottom:   1px solid var(--lrn-border);
}

.lrn-qa-inbox__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.lrn-qa-inbox__link {
	display:         flex;
	gap:             var(--lrn-sp-3);
	text-decoration: none;
	color:           var(--lrn-text);
	flex:            1 1 auto;
	min-width:       0;
}

.lrn-qa-inbox__link:hover .lrn-qa-inbox__meta strong {
	color: var(--lrn-accent);
}

.lrn-qa-inbox__avatar {
	flex:         0 0 auto;
	width:        32px;
	height:       32px;
	border-radius: 50%;
}

.lrn-qa-inbox__body {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-1);
}

.lrn-qa-inbox__meta {
	margin:    0;
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
}

.lrn-qa-inbox__excerpt {
	margin:    0;
	color:     var(--lrn-text);
	font-size: var(--lrn-text-sm);
	overflow:  hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lrn-qa-inbox__time {
	flex:      0 0 auto;
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

/* Instructor dashboard "section header" — title + action button row. */
.lrn-dashboard__section-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   var(--lrn-sp-4);
}

/* ==========================================================================
   Membership card — "My Membership" panel on the student dashboard
   ========================================================================== */

.lrn-membership-card__header {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	margin-bottom: var(--lrn-sp-3);
}

.lrn-membership-card__header h3 {
	margin: 0;
}

/* ==========================================================================
   Certificate cards — earned certificates row on the student dashboard
   ========================================================================== */

/* Grid that arranges certificate cards. auto-fill keeps the row dense
   without exposing a third breakpoint. The 340px minimum is safe on
   tablet+ but would overflow a ≤480px phone where the content column
   is ~320-340px — a second rule below narrows it to a safe single
   column for narrow viewports. */
.lrn-certificates-grid {
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

@media (max-width: 480px) {
	.lrn-certificates-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lrn-certificate-card {
	padding: var(--lrn-sp-6);
}

.lrn-certificate-card__header {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--lrn-sp-3);
	margin-bottom: var(--lrn-sp-5);
}

.lrn-certificate-card__icon {
	color:       var(--lrn-accent);
	width:       var(--lrn-icon-xl);
	height:      var(--lrn-icon-xl);
	flex-shrink: 0;
	margin-top:  var(--lrn-sp-1);
}

.lrn-certificate-card__title {
	font-size:   var(--lrn-text-base);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-1);
	line-height: 1.3;
}

.lrn-certificate-card__meta {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
	margin:    0;
}

.lrn-certificate-card__meta code {
	font-size: var(--lrn-text-xs);
}

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

/* Icon inside each action button — sits to the inline-start of the
   label. `margin-inline-end` (logical) replaces the legacy
   `margin-right` so RTL locales mirror correctly. */
.lrn-certificate-card__actions svg {
	margin-inline-end: var(--lrn-sp-1);
	vertical-align:    middle;
	width:             var(--lrn-icon-sm);
	height:            var(--lrn-icon-sm);
}

/* ==========================================================================
   Instructor profile — public profile page rendered at /instructor/{slug}/
   ========================================================================== */

.lrn-instructor-profile__header {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--lrn-sp-6);
	padding:       var(--lrn-sp-8);
	margin-bottom: var(--lrn-sp-8);
}

.lrn-instructor-profile__avatar {
	width:         120px;
	height:        120px;
	border-radius: 50%;
	flex-shrink:   0;
}

.lrn-instructor-profile__name {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-2);
}

.lrn-instructor-profile__expertise {
	display:       flex;
	flex-wrap:     wrap;
	gap:           var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-3);
}

.lrn-instructor-profile__bio {
	color:         var(--lrn-text-secondary);
	line-height:   var(--lrn-leading-relaxed);
	margin:        0 0 var(--lrn-sp-4);
}

.lrn-instructor-profile__stats {
	display:       flex;
	gap:           var(--lrn-sp-6);
	font-size:     var(--lrn-text-sm);
	color:         var(--lrn-text-secondary);
	margin-bottom: var(--lrn-sp-4);
}

.lrn-instructor-profile__stats strong {
	color: var(--lrn-text);
}

.lrn-instructor-profile__social {
	display: flex;
	gap:     var(--lrn-sp-3);
}

/* Social-link circles — only the instructor profile renders these. */
.lrn-social-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      var(--lrn-bg-secondary);
	color:           var(--lrn-text-secondary);
	transition:      background var(--lrn-dur) var(--lrn-ease),
	                 color var(--lrn-dur) var(--lrn-ease);
}

.lrn-social-link:hover {
	background: var(--lrn-accent-bg);
	color:      var(--lrn-accent);
}

/* Keyboard focus ring — the legacy CSS shipped a hover state but no
   visible focus, so tabbing through the social icons gave no feedback.
   `:focus-visible` keeps mouse clicks ring-free while preserving the
   ring for keyboard users. */
.lrn-social-link:focus-visible {
	outline:        3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 0;
}

.lrn-instructor-profile__courses {
	margin-bottom: var(--lrn-sp-8);
}

.lrn-instructor-profile__courses h2 {
	font-size:   var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
	margin:      0 0 var(--lrn-sp-5);
}

/* ==========================================================================
   Responsive — exactly two breakpoints

   Per ux-foundation responsive rules: 1024px (tablet ↔ desktop) and
   640px (mobile). The legacy stylesheet hit four breakpoints in this
   area (480 / 640 / 768 / 1024-1439) — collapsed here.
   ========================================================================== */

@media (min-width: 1024px) {
	/* Wide desktop: KPI strip becomes 4-up. Below this the base 2-col
	   layout keeps each tile readable on a laptop / tablet. */
	.lrn-stats-row {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 640px) {
	/* Mobile: single-column KPI strip with a tighter gap so 4 tiles
	   stack without dominating the viewport. */
	.lrn-stats-row {
		grid-template-columns: 1fr;
		gap:                   var(--lrn-sp-2);
	}

	/* Stack the dashboard greeting + action buttons vertically so a
	   long display name doesn't fight the Create / Catalog buttons
	   for horizontal space. */
	.lrn-dashboard__header {
		flex-direction: column;
		align-items:    flex-start;
		gap:            var(--lrn-sp-4);
	}

	.lrn-dashboard__actions {
		width:     100%;
		flex-wrap: wrap;
	}

	/* The slim icon rail narrows the content column on phones, so a 64px
	   avatar + 2xl greeting pushed a long name onto three lines. Shrink both
	   so the avatar + name read as a tidy unit (name on 1–2 lines), and let
	   the actions sit full-width below. */
	.lrn-dashboard__welcome {
		gap: var(--lrn-sp-3);
	}

	.lrn-dashboard__avatar {
		width:  48px;
		height: 48px;
	}

	.lrn-dashboard__greeting {
		font-size: var(--lrn-text-xl);
	}

	/* Instructor profile header collapses to centered column — 120px
	   avatar plus bio is too wide for the row layout on a phone. */
	.lrn-instructor-profile__header {
		flex-direction: column;
		align-items:    center;
		text-align:     center;
	}

	.lrn-instructor-profile__stats {
		justify-content: center;
	}

	.lrn-instructor-profile__social {
		justify-content: center;
	}
}

/* Course-list overflow notice — shown when an instructor has more courses than
   the dashboard lists, linking to the paginated management screen. */
.lrn-dashboard-widget__overflow {
	margin:      var(--lrn-sp-3, 12px) 0 0;
	padding-top: var(--lrn-sp-3, 12px);
	border-top:  1px solid var(--lrn-border, rgba(55, 53, 47, 0.09));
	color:       var(--lrn-text-secondary, #6b6b6b);
	font-size:   var(--lrn-text-sm, 13px);
}

.lrn-dashboard-widget__overflow a {
	margin-inline-start: var(--lrn-sp-1, 4px);
	color:               var(--lrn-accent, #2383e2);
	font-weight:         500;
	text-decoration:     none;
}

.lrn-dashboard-widget__overflow a:hover,
.lrn-dashboard-widget__overflow a:focus-visible {
	text-decoration: underline;
}

/* My Courses async Prev/Next pager. */
.lrn-courses-pager {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--lrn-sp-3, 12px);
	margin-top:      var(--lrn-sp-4, 16px);
	padding-top:     var(--lrn-sp-3, 12px);
	border-top:      1px solid var(--lrn-border, rgba(55, 53, 47, 0.09));
	flex-wrap:       wrap;
}

.lrn-courses-pager__status {
	margin:    0;
	color:     var(--lrn-text-secondary, #6b6b6b);
	font-size: var(--lrn-text-sm, 13px);
}

.lrn-courses-pager__controls {
	display:     inline-flex;
	align-items: center;
	gap:         var(--lrn-sp-2, 8px);
}

.lrn-courses-pager__manage {
	margin-inline-start: var(--lrn-sp-2, 8px);
	color:               var(--lrn-accent, #2383e2);
	font-size:           var(--lrn-text-sm, 13px);
	font-weight:         500;
	text-decoration:     none;
}

.lrn-courses-pager__manage:hover,
.lrn-courses-pager__manage:focus-visible {
	text-decoration: underline;
}

[data-lrn-courses-tbody][aria-busy="true"] {
	opacity:    0.55;
	transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
	[data-lrn-courses-tbody][aria-busy="true"] {
		transition: none;
	}
}

@media (max-width: 640px) {
	.lrn-courses-pager {
		flex-direction: column;
		align-items:    stretch;
	}
}

/* Instructor Reports — space the period filter off the table below it
   (card C: the days-wise dropdown was flush against the table). */
.lrn-reports-filter {
	margin-block-end: var(--lrn-sp-4);
}

/* ── Instructor Students roster (/instructor/students/) ─────────────────────
   The drillable student list + per-student detail. Reuses .lrn-table; these
   add the identity column, the search bar, and the detail header. */
.lrn-table-search {
	display:       flex;
	gap:           var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-4);
	max-width:     420px;
}
.lrn-table-search .lrn-input {
	flex: 1 1 auto;
}

.lrn-admin-identity {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--lrn-sp-3);
	text-decoration: none;
	color:           inherit;
}
.lrn-admin-identity__avatar,
.lrn-admin-identity img {
	width:         40px;
	height:        40px;
	border-radius: 50%;
	flex:          0 0 auto;
}
.lrn-admin-identity__text {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}
.lrn-admin-identity__name {
	font-weight: 600;
	color:       var(--lrn-text);
}
.lrn-admin-identity__sub {
	font-size: var(--lrn-fs-sm, 0.85em);
	color:     var(--lrn-text-secondary);
}
.lrn-admin-identity:hover .lrn-admin-identity__name {
	color: var(--lrn-accent);
}

.lrn-section-title {
	margin:      var(--lrn-sp-6) 0 var(--lrn-sp-3);
	font-size:   var(--lrn-fs-lg, 1.1em);
	font-weight: 700;
	color:       var(--lrn-text);
}

.lrn-student-detail__header {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-4);
	margin-bottom: var(--lrn-sp-4);
}
.lrn-student-detail__avatar,
.lrn-student-detail__header img {
	width:         72px;
	height:        72px;
	border-radius: 50%;
	flex:          0 0 auto;
}
.lrn-student-detail__name {
	margin:    0;
	font-size: var(--lrn-fs-xl, 1.4em);
}
.lrn-student-detail__email {
	margin: var(--lrn-sp-1) 0 0;
	color:  var(--lrn-text-secondary);
}
.lrn-student-detail__meta {
	margin:    var(--lrn-sp-2) 0 0;
	font-size: var(--lrn-fs-sm, 0.85em);
	color:     var(--lrn-text-secondary);
}

@media (max-width: 480px) {
	.lrn-student-detail__header { flex-direction: column; text-align: center; }
	.lrn-table-search { max-width: none; }
}