/**
 * Spaces — owner self-service frontend dashboards.
 *
 * Covers /my-spaces/ and /spaces/{slug}/manage/ . Token-driven; dark mode
 * + RTL inherit from Free's root tokens.
 *
 * @package Learnomy_Pro\Extensions\Spaces
 */

/* ========== /my-spaces/ ========== */

.lrn-my-spaces__section {
	margin-block-end: var(--lrn-sp-8);
}

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

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

.lrn-my-spaces__card {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            var(--lrn-sp-4);
	padding:        var(--lrn-sp-5);
}

.lrn-my-spaces__card-body {
	min-width: 0;
}

.lrn-my-spaces__card-title {
	margin: 0 0 var(--lrn-sp-1);
	font-size:   var(--lrn-text-base);
	font-weight: var(--lrn-weight-semibold);
}

.lrn-my-spaces__card-meta {
	margin: 0;
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
}

.lrn-my-spaces__card-actions {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.lrn-my-spaces__card {
		flex-direction: column;
		align-items:    stretch;
	}
	.lrn-my-spaces__card-actions {
		display: flex;
	}
	.lrn-my-spaces__card-actions .lrn-btn {
		width: 100%;
	}
}

/* ========== /spaces/{slug}/manage/ ========== */

.lrn-space-manage__header {
	margin-block-end: var(--lrn-sp-6);
}

.lrn-space-manage__title {
	margin: 0 0 var(--lrn-sp-1);
}

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

.lrn-space-manage__tabs {
	display:        flex;
	gap:            var(--lrn-sp-1);
	border-bottom:  1px solid var(--lrn-border);
	margin-block-end: var(--lrn-sp-6);
}

.lrn-space-manage__tab {
	padding:        var(--lrn-sp-3) var(--lrn-sp-5);
	background:     transparent;
	border:         0;
	border-bottom:  2px solid transparent;
	color:          var(--lrn-text-secondary);
	font-size:      var(--lrn-text-base);
	font-weight:    var(--lrn-weight-medium);
	cursor:         pointer;
	margin-block-end: -1px;
}

.lrn-space-manage__tab:hover {
	color: var(--lrn-text);
}

.lrn-space-manage__tab.is-on {
	color: var(--lrn-accent);
	border-bottom-color: var(--lrn-accent);
}

.lrn-space-manage__panel {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-4);
}

.lrn-space-manage__panel[hidden] {
	display: none;
}

.lrn-space-manage__panel-heading {
	margin: 0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-lg);
	font-weight: var(--lrn-weight-semibold);
}

.lrn-space-manage__add-form {
	display:     flex;
	gap:         var(--lrn-sp-2);
	align-items: center;
}

.lrn-space-manage__add-email {
	flex: 1;
}

.lrn-space-manage__add-help {
	margin: var(--lrn-sp-2) 0 0;
	font-size: var(--lrn-text-sm);
}

.lrn-space-manage__add-result {
	margin-block-start: var(--lrn-sp-3);
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
}

.lrn-space-manage__add-result--success {
	background: color-mix(in srgb, var(--lrn-success) 12%, transparent);
	color:      var(--lrn-success);
}

.lrn-space-manage__add-result--error {
	background: color-mix(in srgb, var(--lrn-danger) 12%, transparent);
	color:      var(--lrn-danger);
}

.lrn-space-manage__invite-controls {
	display: flex;
	gap: var(--lrn-sp-2);
	align-items: center;
}

.lrn-space-manage__invite-url {
	flex: 1;
	font-family: var(--lrn-font-mono);
}

.lrn-space-manage__members-table {
	width: 100%;
}

.lrn-space-manage__kpis {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap:                   var(--lrn-sp-4);
}

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

.lrn-kpi-card__label {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	margin-block-end: var(--lrn-sp-2);
}

.lrn-kpi-card__value {
	font-size:   var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
}

.lrn-kpi-card__sub {
	font-size: var(--lrn-text-base);
	color:     var(--lrn-text-secondary);
	margin-inline-start: var(--lrn-sp-1);
}

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

.lrn-space-manage__courses-list li {
	padding: var(--lrn-sp-2) 0;
	border-bottom: 1px solid var(--lrn-divider);
}

.lrn-space-manage__courses-list li:last-child {
	border-bottom: 0;
}

/* ── Member progress modal ─────────────────────────────────────────── */

.lrn-space-manage__member-modal {
	position:    fixed;
	inset:       0;
	z-index:     100000;
	display:     flex;
	align-items: center;
	justify-content: center;
}

.lrn-space-manage__member-modal[hidden] {
	display: none;
}

.lrn-space-manage__member-modal .lrn-modal__backdrop {
	position:   absolute;
	inset:      0;
	background: color-mix(in srgb, var(--lrn-text) 70%, transparent);
	cursor:     pointer;
}

.lrn-space-manage__member-modal-dialog {
	position:      relative;
	background:    var(--lrn-bg);
	border-radius: var(--lrn-radius-lg);
	box-shadow:    0 24px 64px rgba(0, 0, 0, 0.18);
	max-width:     720px;
	width:         92vw;
	max-height:    80vh;
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
}

.lrn-space-manage__member-modal-dialog .lrn-modal__head {
	display:        flex;
	align-items:    center;
	justify-content: space-between;
	gap:            var(--lrn-sp-3);
	padding:        var(--lrn-sp-5);
	border-bottom:  1px solid var(--lrn-border);
}

.lrn-space-manage__member-modal-dialog .lrn-modal__close {
	background: transparent;
	border:     0;
	font-size:  24px;
	line-height: 1;
	color:      var(--lrn-text-secondary);
	cursor:     pointer;
	padding:    0 var(--lrn-sp-2);
}

.lrn-space-manage__member-modal-body {
	padding:    var(--lrn-sp-5);
	overflow-y: auto;
}

/* ── Progress bar (inline in the modal table) ──────────────────────── */

.lrn-progress-bar {
	display:        inline-block;
	width:          120px;
	height:         8px;
	border-radius:  var(--lrn-radius-pill);
	background:     var(--lrn-bg-muted);
	margin-inline-end: var(--lrn-sp-2);
	overflow:       hidden;
	vertical-align: middle;
}

.lrn-progress-bar__fill {
	height:     100%;
	background: var(--lrn-accent);
}

/* ── Settings tab ──────────────────────────────────────────────────── */

.lrn-space-manage__settings-form .lrn-form-field,
.lrn-space-manage__notifications-form .lrn-form-field {
	margin-block-end: var(--lrn-sp-4);
}

.lrn-space-manage__settings-form label,
.lrn-space-manage__notifications-form label {
	display:          block;
	margin-block-end: var(--lrn-sp-1);
	font-weight:      var(--lrn-weight-medium);
}

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

.lrn-checkbox-row:last-of-type {
	border-bottom: 0;
}

.lrn-checkbox-row input[type="checkbox"] {
	margin-top: var(--lrn-sp-1);
}

/* ── Link-styled button (used as member-name clickable trigger) ────── */

.lrn-link-button {
	background:     transparent;
	border:         0;
	padding:        0;
	color:          var(--lrn-accent);
	cursor:         pointer;
	text-decoration: underline;
	font:           inherit;
}

.lrn-link-button:hover {
	color: color-mix(in srgb, var(--lrn-accent) 80%, var(--lrn-text));
}

/* ── Bulk add ──────────────────────────────────────────────────────── */

.lrn-space-manage__bulk-details {
	margin-block-start: var(--lrn-sp-4);
	padding-block-start: var(--lrn-sp-3);
	border-top: 1px solid var(--lrn-divider);
}

.lrn-space-manage__bulk-details summary {
	cursor:        pointer;
	color:         var(--lrn-accent);
	font-weight:   var(--lrn-weight-medium);
	font-size:     var(--lrn-text-sm);
	margin-block-end: var(--lrn-sp-3);
}

.lrn-space-manage__bulk-textarea {
	width:        100%;
	font-family:  var(--lrn-font-mono);
	font-size:    var(--lrn-text-sm);
	margin-block-end: var(--lrn-sp-2);
}

.lrn-space-manage__bulk-summary {
	margin-block-start: var(--lrn-sp-3);
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
}

/* ── Invite code chip + bulk actions (v2 PR 1) ─────────────────────── */

.lrn-space-manage__invite-code-display {
	display:        inline-block;
	padding:        var(--lrn-sp-1) var(--lrn-sp-3);
	border:         1px solid var(--lrn-border);
	border-radius:  var(--lrn-radius-md);
	background:     var(--lrn-bg-muted);
	color:          var(--lrn-text);
	font-family:    var(--lrn-font-mono);
	font-size:      var(--lrn-text-lg);
	font-weight:    var(--lrn-weight-semibold);
	letter-spacing: 0.1em;
	user-select:    all;
	margin-inline-end: var(--lrn-sp-2);
}

.lrn-space-manage__bulk-actions {
	display:     flex;
	gap:         var(--lrn-sp-2);
	align-items: center;
	margin-block: var(--lrn-sp-2);
}

.lrn-space-manage__bulk-actions label[for="lrn-space-bulk-csv"] {
	cursor: pointer;
}

.lrn-space-manage__row-actions {
	display:     flex;
	gap:         var(--lrn-sp-1);
	align-items: center;
	flex-wrap:   wrap;
}

/* ─────────────────────────────────────────────────────────────
   v2 PR 3 — Public /spaces/plans/ + /spaces/buy/{slug}/
   ───────────────────────────────────────────────────────────── */

.lrn-space-plans-page,
.lrn-space-buy-page {
	padding-block: var(--lrn-sp-6);
}

.lrn-space-plans-page__intro,
.lrn-space-buy-page__intro {
	text-align:    center;
	margin-block-end: var(--lrn-sp-6);
}

.lrn-space-plans-page__title {
	font-size:   var(--lrn-text-3xl);
	font-weight: 700;
	margin:      0 0 var(--lrn-sp-2);
}

.lrn-space-plans-page__subtitle {
	color: var(--lrn-text-secondary);
	margin: 0;
}

.lrn-space-plans-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap:                   var(--lrn-sp-4);
}

.lrn-space-plan-card {
	background:    var(--lrn-bg-elevated, var(--lrn-bg));
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	padding:       var(--lrn-sp-5);
	display:       flex;
	flex-direction: column;
	gap:           var(--lrn-sp-3);
	position:      relative;
}

/*
 * A plan the owner marked Popular. The accent border carries the emphasis and
 * the badge names it, so the distinction survives for anyone who cannot see the
 * colour — a border-colour-only treatment would not.
 */
.lrn-space-plan-card--featured {
	border-color: var(--lrn-accent);
	box-shadow:   0 0 0 1px var(--lrn-accent);
}

/*
 * --lrn-accent, NOT --lrn-primary. `--lrn-primary` is an admin-only token and
 * does not exist on the front end, so the first cut of this badge computed a
 * TRANSPARENT background under white text — invisible on a light card. Every
 * other accent in this stylesheet already uses --lrn-accent; the pressed-chip
 * bug was the same mistake.
 */
.lrn-space-plan-card__badge {
	align-self:     flex-start;
	margin:         0;
	padding:        var(--lrn-sp-1) var(--lrn-sp-3);
	border-radius:  var(--lrn-radius-pill);
	background:     var(--lrn-accent);
	color:          var(--lrn-accent-contrast, #fff);
	font-size:      var(--lrn-text-xs);
	font-weight:    600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.lrn-space-plan-card__title {
	margin:    0;
	font-size: var(--lrn-text-xl);
}

.lrn-space-plan-card__price {
	margin: 0;
	font-size: var(--lrn-text-2xl);
	font-weight: 700;
}

.lrn-space-plan-card__period {
	font-size:   var(--lrn-text-base);
	font-weight: 400;
	color:       var(--lrn-text-secondary);
}

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

.lrn-space-plan-card__features {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	flex-direction: column;
	gap:        var(--lrn-sp-1);
	font-size:  var(--lrn-text-sm);
}

.lrn-space-plan-card__features li::before {
	content: "✓ ";
	color:   var(--lrn-accent);
}

.lrn-space-plan-card .lrn-btn {
	margin-block-start: auto;
}

/* Buy page two-column layout */
.lrn-space-buy-layout {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap:                   var(--lrn-sp-6);
	align-items:           flex-start;
}

@media (max-width: 768px) {
	.lrn-space-buy-layout {
		grid-template-columns: 1fr;
	}
}

.lrn-space-buy-form {
	background:    var(--lrn-bg-elevated, var(--lrn-bg));
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	padding:       var(--lrn-sp-5);
}

.lrn-space-buy-form .lrn-form-row {
	margin-block-end: var(--lrn-sp-4);
}

.lrn-space-buy-form label {
	display:          block;
	font-weight:      600;
	margin-block-end: var(--lrn-sp-1);
}

.lrn-space-buy-form input[type="text"] {
	width:         100%;
	padding:       var(--lrn-sp-2);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	background:    var(--lrn-bg);
	color:         var(--lrn-text);
}

.lrn-space-buy-form .lrn-form-help {
	margin:         var(--lrn-sp-1) 0 0;
	font-size:      var(--lrn-text-sm);
	color:          var(--lrn-text-secondary);
}

.lrn-space-buy-summary {
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	padding:       var(--lrn-sp-4);
	font-size:     var(--lrn-text-sm);
}

.lrn-space-buy-summary h2 {
	margin:    0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-lg);
}

.lrn-space-buy-summary ul,
.lrn-space-buy-summary__courses {
	margin:     0;
	padding-inline-start: var(--lrn-sp-4);
}

.lrn-link-back {
	display:     inline-block;
	margin-block-end: var(--lrn-sp-2);
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-sm);
	text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
   v2 PR 4 — "Add more seats" card on /spaces/{slug}/manage/?tab=settings
   ───────────────────────────────────────────────────────────── */

.lrn-space-seat-packs {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap:                   var(--lrn-sp-3);
	margin-block-start:    var(--lrn-sp-3);
}

.lrn-space-seat-pack {
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	padding:       var(--lrn-sp-3);
	display:       flex;
	flex-direction: column;
	gap:           var(--lrn-sp-2);
}

.lrn-space-seat-pack__head {
	display:         flex;
	flex-direction:  column;
	gap:             var(--lrn-sp-1);
}

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

/* ─────────────────────────────────────────────────────────────
   v2 PR 5 follow-up — Subscription status card + paused space
   ───────────────────────────────────────────────────────────── */

.lrn-space-manage__sub-card {
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
	padding:       var(--lrn-sp-4);
	background:    var(--lrn-bg);
}

.lrn-space-sub-meta {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap:                   var(--lrn-sp-3);
	margin:                0 0 var(--lrn-sp-3);
}

.lrn-space-sub-meta > div {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-1);
}

.lrn-space-sub-meta dt {
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text-secondary);
	margin:      0;
	font-weight: 400;
}

.lrn-space-sub-meta dd {
	margin:      0;
	font-weight: 600;
}

.lrn-space-sub-actions {
	display:    flex;
	gap:        var(--lrn-sp-2);
	flex-wrap:  wrap;
	margin-block-start: var(--lrn-sp-3);
}

/* The BASE rule was missing entirely — only the colour modifiers below existed,
   so a pill rendered as `display: block` with no padding and no radius: a raw
   text highlight sitting on its own line, not a pill. */
.lrn-pill {
	display:       inline-flex;
	align-items:   center;
	padding:       var(--lrn-sp-1) var(--lrn-sp-2);
	border-radius: var(--lrn-radius-pill, 999px);
	font-size:     var(--lrn-text-xs);
	font-weight:   var(--lrn-weight-semibold);
	line-height:   var(--lrn-leading-tight);
	white-space:   nowrap;
}

/* Token-driven, not raw hex. These were #2e7d32 / #ed6c02 / #e65100, which the
   CSS rule forbids and which ignore the theme's palette — so a pill kept its own
   green and orange whatever the site's colours were. */
.lrn-pill--ok {
	background: color-mix(in srgb, var(--lrn-success) 14%, transparent);
	color:      color-mix(in srgb, var(--lrn-success) 80%, var(--lrn-text));
}
.lrn-pill--warn {
	background: color-mix(in srgb, var(--lrn-warn) 14%, transparent);
	color:      color-mix(in srgb, var(--lrn-warn) 80%, var(--lrn-text));
}
.lrn-pill--off {
	background: color-mix(in srgb, var(--lrn-text-secondary) 14%, transparent);
	color:      var(--lrn-text-secondary);
}

.lrn-space-manage--inactive {
	padding-block: var(--lrn-sp-6);
}

.lrn-space-manage__paused {
	max-width: 640px;
	margin:    0 auto;
}

/* Replaces inline styles in the self-service widgets + my-spaces (2026-06-03
   inline-style sweep). Token-driven, no raw values. */
.lrn-pro-space-request {
	margin-top: var(--lrn-sp-5);
}
.lrn-pro-space-request__heading--pending {
	margin-top: var(--lrn-sp-4);
}
/* The form had no rules at all, so it was a bare block: its fields got their
   rhythm incidentally from label margins and the submit button got none,
   leaving "Send request" sitting flush against the textarea above it with a
   measured gap of ZERO pixels (Basecamp 10171640089).

   Owning the spacing on the form rather than adding a margin to the button
   means every child is spaced on the same token, including anything added
   later — a one-off margin on the button would have fixed the screenshot and
   left the next element to rediscover the same bug. */
.lrn-pro-space-request__form {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-4);
}
/* Fields stay full width (flex default stretch); only the submit shrinks to
   its label. Setting align-items:flex-start on the form instead collapsed the
   select to 342px and the textarea to 195px inside an 878px form — a worse bug
   than the one being fixed, and invisible unless you measure after. */
.lrn-pro-space-request__form .lrn-btn {
	align-self: flex-start;
}
.lrn-seat-count-input {
	width: 5em;
}
.lrn-card--pad-lg {
	padding: var(--lrn-sp-8);
}
.lrn-card--center > h2:first-child {
	margin-top: 0;
}

/* ── Owner course list + "add a course" typeahead (space-owner-courses) ── */
.lrn-pro-space-courses {
	list-style: none;
	margin:     0 0 var(--lrn-sp-5);
	padding:    0;
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-2);
}
.lrn-pro-space-courses__item {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-3) var(--lrn-sp-4);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	background:    var(--lrn-bg);
}
.lrn-pro-space-courses__link {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--lrn-sp-2);
	text-decoration: none;
	color:           var(--lrn-text);
	font-weight:     var(--lrn-weight-semibold);
}
.lrn-pro-space-courses__icon { width: 1.1em; height: 1.1em; }
.lrn-pro-space-courses__meta {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}
.lrn-pro-space-courses__scope { margin-inline-start: auto; }

.lrn-pro-space-course-add { margin-block: var(--lrn-sp-5); }
.lrn-pro-space-course-add__heading {
	margin:      0 0 var(--lrn-sp-1);
	font-size:   var(--lrn-text-base);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
}
.lrn-pro-space-course-add__field {
	position:  relative;
	max-width: 28rem;
}
.lrn-pro-space-course-add__field .lrn-input { width: 100%; }
.lrn-pro-space-course-add__results {
	list-style: none;
	margin:     var(--lrn-sp-1) 0 0;
	padding:    var(--lrn-sp-1);
	position:      absolute;
	inset-inline:  0;
	z-index:       20;
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	box-shadow:    0 var(--lrn-sp-1) var(--lrn-sp-3) color-mix(in srgb, var(--lrn-text) 12%, transparent);
	max-height:    16rem;
	overflow-y:    auto;
}
.lrn-pro-space-course-add__option {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-2);
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	border-radius: var(--lrn-radius-md);
	cursor:        pointer;
	color:         var(--lrn-text);
}
.lrn-pro-space-course-add__option.is-active,
.lrn-pro-space-course-add__option:hover {
	background: color-mix(in srgb, var(--lrn-accent) 12%, transparent);
}
.lrn-pro-space-course-add__status { margin: var(--lrn-sp-2) 0 0; font-size: var(--lrn-text-sm); }

@media (max-width: 640px) {
	.lrn-pro-space-course-add__field { max-width: 100%; }
	.lrn-pro-space-courses__scope    { margin-inline-start: 0; width: 100%; }
}

/* ── Groups: sub-groups + scoped managers (space-owner-groups widget) ──── */
.lrn-pro-space-groups__intro {
	color:              var(--lrn-text-secondary);
	font-size:          var(--lrn-text-sm);
	margin-block-start: 0;
}

.lrn-pro-space-groups__create {
	display:            flex;
	gap:                var(--lrn-sp-2);
	flex-wrap:          wrap;
	margin-block-end:   var(--lrn-sp-4);
}
.lrn-pro-space-groups__create .lrn-input {
	flex:      1 1 14rem;
	min-width: 0;
}

.lrn-pro-space-groups__result {
	margin-block: var(--lrn-sp-2) var(--lrn-sp-4);
}

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

.lrn-pro-space-group {
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	background:    var(--lrn-bg-elevated, #fff);
}

.lrn-pro-space-group__head {
	display:         flex;
	align-items:     center;
	gap:             var(--lrn-sp-3);
	padding:         var(--lrn-sp-3) var(--lrn-sp-4);
	min-height:      var(--lrn-touch-min);
	cursor:          pointer;
	font-weight:     var(--lrn-weight-semibold);
	border-radius:   var(--lrn-radius-md);
}
.lrn-pro-space-group__head::-webkit-details-marker {
	display: none;
}
.lrn-pro-space-group__head::marker {
	content: '';
}

/* Same disclosure affordance as the wp-admin Groups tab — the native marker is
 * suppressed above, so without the chevron the row reads as a line of static
 * text and its whole control set looks absent (Basecamp 10144799566). */
.lrn-pro-space-group__chevron {
	flex-shrink: 0;
	color:       var(--lrn-text-secondary);
	transition:  transform var(--lrn-dur) var(--lrn-ease);
}
.lrn-pro-space-group > details[open] > .lrn-pro-space-group__head .lrn-pro-space-group__chevron {
	transform: rotate(90deg);
}
.lrn-pro-space-group__head:hover {
	background: var(--lrn-bg-muted, var(--lrn-bg-secondary));
}
.lrn-pro-space-group__head:focus-visible {
	outline:        2px solid var(--lrn-accent);
	outline-offset: -2px;
}

.lrn-pro-space-group__name {
	flex:      1 1 auto;
	min-width: 0;
}

.lrn-pro-space-group__counts {
	color:               var(--lrn-text-secondary);
	font-size:           var(--lrn-text-sm);
	font-weight:         400;
	margin-inline-start: auto;
}

@media (prefers-reduced-motion: reduce) {
	.lrn-pro-space-group__chevron {
		transition: none;
	}
}

.lrn-pro-space-group__body {
	padding:        0 var(--lrn-sp-4) var(--lrn-sp-4);
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-4);
	border-block-start: 1px solid var(--lrn-divider);
	padding-block-start: var(--lrn-sp-4);
}

.lrn-pro-space-group__section {
	border:        0;
	margin:        0;
	padding:       0;
	min-width:     0;
}
.lrn-pro-space-group__section > legend {
	font-size:        var(--lrn-text-sm);
	font-weight:      var(--lrn-weight-semibold);
	color:            var(--lrn-text-secondary);
	padding:          0;
	margin-block-end: var(--lrn-sp-2);
}

.lrn-pro-space-group__check {
	display:     flex;
	align-items: center;
	gap:         var(--lrn-sp-2);
	padding-block: var(--lrn-sp-1);
	font-size:   var(--lrn-text-base);
}

.lrn-pro-space-group__hint {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
	margin:    0;
}

.lrn-pro-space-group__manager-list {
	list-style:  none;
	margin:      0 0 var(--lrn-sp-2);
	padding:     0;
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--lrn-sp-2);
}
.lrn-pro-space-group__manager-list li {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--lrn-sp-1);
	background:    var(--lrn-bg-muted);
	border-radius: var(--lrn-radius-pill);
	padding:       var(--lrn-sp-1) var(--lrn-sp-3);
	font-size:     var(--lrn-text-sm);
}

.lrn-pro-space-group__manager-add {
	display:   flex;
	gap:       var(--lrn-sp-2);
	flex-wrap: wrap;
}
.lrn-pro-space-group__manager-add .lrn-input {
	flex:      1 1 12rem;
	min-width: 0;
}

@media ( max-width: 640px ) {
	.lrn-pro-space-groups__create,
	.lrn-pro-space-group__manager-add {
		flex-direction: column;
		align-items:    stretch;
	}

	/*
	 * The 14rem / 12rem above are minimum WIDTHS for the field beside its
	 * button. flex-basis is measured along the MAIN axis, so the moment these
	 * forms become columns the same value is a minimum HEIGHT — the "New group
	 * name" box rendered 238px tall. Stretch already gives them the full width
	 * here, so the basis has nothing left to do.
	 */
	.lrn-pro-space-groups__create .lrn-input,
	.lrn-pro-space-group__manager-add .lrn-input {
		flex-basis: auto;
	}
	/* Wrap rather than stack: column direction would push the chevron above the
	 * group name and break the disclosure read. The chevron keeps the leading
	 * slot and the counts drop to a second line. */
	.lrn-pro-space-group__head {
		flex-wrap:   wrap;
		align-items: center;
		gap:         var(--lrn-sp-1) var(--lrn-sp-2);
	}
	.lrn-pro-space-group__name {
		flex: 1 1 auto;
	}
	.lrn-pro-space-group__counts {
		flex-basis:          100%;
		margin-inline-start: 0;
	}
}

/* ── Course access scope control (space-owner-courses widget) ──────────── */
.lrn-pro-space-courses__scope {
	display:            inline-flex;
	align-items:        center;
	gap:                var(--lrn-sp-2);
	margin-inline-start: auto;
}
.lrn-pro-space-courses__scope select {
	font-size:     var(--lrn-text-sm);
	padding-block: var(--lrn-sp-1);
	max-width:     16rem;
}
.lrn-pro-space-courses__scope-hint {
	flex-basis:  100%;
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-sm);
	margin-block-start: var(--lrn-sp-1);
}

/* Per-course scope tag inside a group's course picker. */
.lrn-pro-space-group__check-tag {
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-sm);
	margin-inline-start: var(--lrn-sp-1);
}

@media ( max-width: 640px ) {
	.lrn-pro-space-courses__scope {
		margin-inline-start: 0;
		flex-wrap:           wrap;
	}
}

/* ── Groups: adaptive chip + search-to-add (large-space safe) ──────────── */
/* Stacked full-width sections (row by row), not columns: chips flow across the
 * full width and search boxes get room — scales past a few members per group. */
.lrn-pro-space-group__body {
	display:               flex;
	flex-direction:        column;
	gap:                   var(--lrn-sp-5);
	padding:               0 var(--lrn-sp-4) var(--lrn-sp-4);
	border-block-start:    1px solid var(--lrn-divider);
	padding-block-start:   var(--lrn-sp-4);
}
.lrn-pro-space-group__search { max-width: 28rem; }
.lrn-pro-space-group__legend {
	margin:      0 0 var(--lrn-sp-2);
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text-secondary);
}
.lrn-pro-space-group__footer { grid-column: 1 / -1; }
.lrn-pro-space-group__chips {
	list-style: none;
	margin:     0 0 var(--lrn-sp-2);
	padding:    0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--lrn-sp-2);
}
.lrn-pro-space-group__chip {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--lrn-sp-1);
	background:    var(--lrn-bg-muted);
	border-radius: var(--lrn-radius-pill);
	padding:       var(--lrn-sp-1) var(--lrn-sp-2) var(--lrn-sp-1) var(--lrn-sp-3);
	font-size:     var(--lrn-text-sm);
}
.lrn-pro-space-group__chip-x {
	appearance:    none;
	border:        0;
	background:    transparent;
	cursor:        pointer;
	font-size:     1rem;
	line-height:   1;
	color:         var(--lrn-text-secondary);
	padding:       0 var(--lrn-sp-1);
	border-radius: var(--lrn-radius-pill);
}
.lrn-pro-space-group__chip-x:hover { color: var(--lrn-danger); }
.lrn-pro-space-group__chips-empty {
	color:     var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}
.lrn-pro-space-group__search { position: relative; }
.lrn-pro-space-group__search-input { width: 100%; }
.lrn-pro-space-group__assign {
	display: flex;
	gap:     var(--lrn-sp-2);
	flex-wrap: wrap;
}
.lrn-pro-space-group__results {
	list-style:    none;
	margin:        var(--lrn-sp-1) 0 0;
	padding:       var(--lrn-sp-1);
	position:      absolute;
	z-index:       10;
	inset-inline:  0;
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	box-shadow:    var(--lrn-shadow-md);
	max-height:    15rem;
	overflow-y:    auto;
}
.lrn-pro-space-group__result {
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	border-radius: var(--lrn-radius-sm);
	cursor:        pointer;
	font-size:     var(--lrn-text-base);
}
.lrn-pro-space-group__result:hover { background: var(--lrn-bg-muted); }
.lrn-pro-space-group__result--empty {
	cursor: default;
	color:  var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
}
.lrn-pro-space-group__result--empty:hover { background: transparent; }

/* ── Branded invite landing (?learnomy_space_invite=) ─────────────────── */
.lrn-space-invite-page {
	display:         flex;
	justify-content: center;
	padding-block:   var(--lrn-sp-8, 3rem);
}
.lrn-space-invite-card {
	width:           100%;
	max-width:       30rem;
	background:      var(--lrn-bg);
	border:          1px solid var(--lrn-border);
	border-radius:   var(--lrn-radius-lg);
	box-shadow:      var(--lrn-shadow-md);
	padding:         var(--lrn-sp-6, 2rem);
	text-align:      center;
}
.lrn-space-invite-card__icon {
	width:        2.5rem;
	height:       2.5rem;
	color:        var(--lrn-accent);
	margin-block-end: var(--lrn-sp-3);
}
.lrn-space-invite-card__eyebrow {
	margin:          0 0 var(--lrn-sp-1);
	font-size:       var(--lrn-text-sm);
	font-weight:     var(--lrn-weight-semibold);
	letter-spacing:  .04em;
	text-transform:  uppercase;
	color:           var(--lrn-text-secondary);
}
.lrn-space-invite-card__title {
	margin:      0 0 var(--lrn-sp-2);
	font-size:   var(--lrn-fs-h2, 1.5rem);
	line-height: 1.2;
}
.lrn-space-invite-card__lead {
	margin:    0 0 var(--lrn-sp-5);
	color:     var(--lrn-text-secondary);
}
.lrn-space-invite-card__cta { width: 100%; }
.lrn-space-invite-card__auth {
	margin-block-start: var(--lrn-sp-4);
	padding-block-start: var(--lrn-sp-4);
	border-block-start: 1px solid var(--lrn-divider);
	text-align: start;
}
.lrn-space-invite-card__auth-title {
	margin:    0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-base);
	text-align: center;
}
.lrn-space-invite-card__auth #loginform {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-2);
}
.lrn-space-invite-card__auth #loginform label {
	display:     block;
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
}
.lrn-space-invite-card__auth #loginform input[type="text"],
.lrn-space-invite-card__auth #loginform input[type="password"] {
	width:         100%;
	box-sizing:    border-box;
	padding:       var(--lrn-sp-2) var(--lrn-sp-3);
	border:        1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-sm);
}
.lrn-space-invite-card__auth #loginform .submit input,
.lrn-space-invite-card__auth #wp-submit {
	width:           100%;
	padding:         var(--lrn-sp-2) var(--lrn-sp-4);
	background:      var(--lrn-accent);
	color:           #fff;
	border:          0;
	border-radius:   var(--lrn-radius-sm);
	font-weight:     var(--lrn-weight-semibold);
	cursor:          pointer;
}
.lrn-space-invite-card__alt {
	margin-block-start: var(--lrn-sp-4);
	font-size:          var(--lrn-text-sm);
	color:              var(--lrn-text-secondary);
	text-align:         center;
}

/* Reports widget — summary line + CSV export button on one row. */
.lrn-space-reports__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--lrn-sp-3);
	flex-wrap:       wrap;
	margin-block-end: var(--lrn-sp-3);
}

.lrn-space-reports__export {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.lrn-space-reports__head {
		align-items: flex-start;
	}
}

/* ==========================================================================
   Join requests widget — people asking to be let into this space.

   Rows are person-shaped, not data-shaped: avatar, name, email and their own
   note, because this flow exists for people the owner already meant to
   include and approving is closer to a formality than to gatekeeping. The
   layout therefore prioritises recognising someone over scanning a table.
   ========================================================================== */

.lrn-space-join__intro {
	margin: 0 0 var(--lrn-sp-4);
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
}

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

.lrn-space-join__status--error {
	background: color-mix(in srgb, var(--lrn-danger) 12%, transparent);
	color:      var(--lrn-danger);
}

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

.lrn-space-join__item {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             var(--lrn-sp-4);
	padding-block:   var(--lrn-sp-3);
	border-block-end: 1px solid var(--lrn-border);
}

.lrn-space-join__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.lrn-space-join__who {
	display:     flex;
	align-items: flex-start;
	gap:         var(--lrn-sp-3);
	min-width:   0;
}

.lrn-space-join__avatar {
	border-radius: var(--lrn-radius-full, 50%);
	flex-shrink:   0;
}

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

.lrn-space-join__name {
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
	overflow-wrap: anywhere;
}

.lrn-space-join__meta {
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
	overflow-wrap: anywhere;
}

/* The applicant's own words. Indented off a rule rather than boxed: it is a
   quotation from a person, and a filled box reads as a system message. */
.lrn-space-join__note {
	margin: var(--lrn-sp-1) 0 0;
	/* Themes style bare <blockquote> — a filled panel, big quote marks, an
	   inherited font size. Reset the ones that change the meaning here: the
	   theme's grey fill made the applicant's sentence read as a system notice
	   rather than as something a person typed. Most owners do not run our
	   themes, so the reset belongs in the plugin, not in ours. */
	background: none;
	quotes: none;
	padding: 0;
	padding-inline-start: var(--lrn-sp-3);
	border-inline-start: 2px solid var(--lrn-border);
	font-size: var(--lrn-text-sm);
	color:     var(--lrn-text-secondary);
	font-style: italic;
	overflow-wrap: anywhere;
}

.lrn-space-join__actions {
	display:     flex;
	gap:         var(--lrn-sp-2);
	flex-shrink: 0;
}

/* Under 480px the two-column row stops working: the note wraps to two or
   three lines and the buttons get squeezed under the 40px tap target. Stack,
   and let each button take half the width so both stay comfortably tappable. */
@media (max-width: 480px) {
	.lrn-space-join__item {
		flex-direction: column;
		align-items:    stretch;
	}
	.lrn-space-join__actions .lrn-btn {
		flex: 1;
		min-height: 40px;
	}
}