/*
 * Dashboard embedding contract.
 * Loaded after the dashboard, skin and layout styles. The host owns the page
 * width; this sheet owns the UI inside it, including detached UI surfaces.
 * Keep the measured-width fallback tokens in sync with the container queries.
 */

.lmsc-ui,
.lmsc-ui *,
.lmsc-ui *::before,
.lmsc-ui *::after {
	box-sizing: border-box;
}

/* WordPress may replace text emoji with SVG images even when its emoji CSS is
 * absent. These remain inline glyphs, never responsive photographs. Important
 * declarations match core's contract and resist theme-wide image rules. */
.lmsc-ui img:is(.emoji, .wp-smiley) {
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 1em !important;
	max-height: 1em !important;
	margin: 0 0.07em !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	vertical-align: -0.1em !important;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Leave max-width to the host's constrained/alignwide/alignfull rules. The
 * inner dashboard clamps itself without overriding the outer page contract. */
.lmsc-dashboard-shell {
	container: lmsc-dashboard / inline-size;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui {
	--lmsc-shell-columns: var(--lmsc-shell-sidebar-width, 280px) minmax(0, 1fr);
	--lmsc-shell-padding: 28px 36px;
	--lmsc-shell-sidebar-position: sticky;
	--lmsc-shell-sidebar-min-height: 100vh;
	--lmsc-shell-sidebar-display: flex;
	--lmsc-shell-topnav-display: block;
	--lmsc-shell-nav-display: none;
	--lmsc-shell-more-display: none;
	font-size: 16px;
	min-width: 0;
	width: 100%;
	max-width: 100% !important;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui.lmsc-dash--sidebar {
	display: grid;
	grid-template-columns: var(--lmsc-shell-columns) !important;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui.lmsc-dash--sidebar-collapsed {
	--lmsc-shell-sidebar-width: 72px;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui > .lmsc-dash__sidebar {
	display: flex !important;
	position: var(--lmsc-shell-sidebar-position);
	inset: auto;
	top: var(--lmsc-admin-bar-height, 0px);
	width: auto;
	min-width: 0;
	max-width: 100%;
	min-height: var(--lmsc-shell-sidebar-min-height);
	height: auto;
	margin-inline: 0 !important;
	flex-direction: column;
	transform: none;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui[data-lmsc-nav-ready="true"] > .lmsc-dash__sidebar {
	display: var(--lmsc-shell-sidebar-display) !important;
}

/* Retain the original account links until JavaScript has supplied their
 * compact replacement. Legacy viewport rules hide these footer controls. */
.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:not([data-lmsc-nav-ready="true"]) > .lmsc-dash__sidebar > :is(.lmsc-dash__sidebar-header, .lmsc-dash__sidebar-footer) {
	display: block;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:not([data-lmsc-nav-ready="true"]) .lmsc-dash__sidebar-footer .lmsc-dash__logout-btn > span {
	display: inline;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui > .lmsc-dash__main {
	container: lmsc-dashboard-main / inline-size;
	min-width: 0;
	width: 100%;
	max-width: 100% !important;
	padding: var(--lmsc-shell-padding) !important;
	margin-inline: 0 !important;
	overflow: visible !important;
}

.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui.lmsc-dash--topnav > .lmsc-dash__main {
	max-width: min(100%, 1280px) !important;
	margin-inline: auto !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__content,
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__panel {
	min-width: 0;
	max-width: 100% !important;
	overflow-x: visible !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__topnav-wrapper {
	display: block !important;
	min-width: 0;
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-nav-ready="true"] .lmsc-dash__topnav-wrapper {
	display: var(--lmsc-shell-topnav-display) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-nav-ready="true"] :is(.lmsc-dash__mobile-toggle, .lmsc-dash__hamburger) {
	display: none !important;
}

/* Compact navigation stays inside the dashboard. It must not cover the host
 * site's content, footer or controls in a narrow desktop builder column. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui > .lmsc-dash__mobile-tabs {
	display: var(--lmsc-shell-nav-display) !important;
	position: relative;
	inset: auto;
	order: -2;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	/* 2.8.2: rows keep their content height. A theme height, or Safari sizing
	 * grid rows before it knows the column widths, must not stretch them. */
	height: auto !important;
	min-height: 0;
	max-height: none;
	align-items: stretch;
	align-content: start;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-flow: row;
	gap: 4px;
	padding: 6px 8px;
	border: 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
	background: var(--lmsc-surface, #fff);
	box-shadow: none;
	z-index: 2;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 48px;
	max-height: none;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--lmsc-text-muted, #64748b);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.25;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Two-row phone grid (six columns): three tabs on the first row, and the last
 * row's tabs share its full width, so "More" never sits beside an empty cell. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab {
	grid-column: span 2;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab:nth-child(3n+1):nth-last-child(2),
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab:nth-child(3n+1):nth-last-child(2) + .lmsc-dash__mobile-tab,
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab:first-child:nth-last-child(4),
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab:first-child:nth-last-child(4) ~ .lmsc-dash__mobile-tab {
	grid-column: span 3;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab:nth-child(3n+1):last-child {
	grid-column: 1 / -1;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab :is(svg, .lmsc-dash__nav-icon) {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* One line per label. Wrapping "anywhere" let Safari measure each label one
 * letter per line, which made every tab row hundreds of pixels tall (2.8.2).
 * The full label stays in the button's accessible name and title. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	word-break: normal;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui > .lmsc-dash__mobile-more-drawer {
	display: none !important;
	position: relative;
	inset: auto;
	order: -1;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	max-height: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
	gap: 8px;
	padding: 12px;
	border: 0;
	border-bottom: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 0;
	box-shadow: none;
	background: var(--lmsc-surface, #fff);
	z-index: 2;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui > .lmsc-dash__mobile-more-drawer--open:not([hidden]) {
	display: var(--lmsc-shell-more-display) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui > .lmsc-dash__mobile-more-drawer[hidden] {
	display: none !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__mobile-more-item, .lmsc-dash__mobile-more-close) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 44px;
	padding: 10px;
	border: 1px solid var(--lmsc-border, #e2e8f0);
	border-radius: 8px;
	background: var(--lmsc-bg, #f8fafc);
	color: var(--lmsc-text, #1e293b);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	overflow-wrap: break-word;
	cursor: pointer;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-more-item svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-more-close {
	grid-column: 1 / -1;
	justify-self: end;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__mobile-tab--active, .lmsc-dash__mobile-more-item[aria-current="page"]) {
	color: var(--lmsc-primary, #1e6ff5) !important;
	background: rgba(var(--lmsc-primary-rgb, 30, 111, 245), 0.1) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__mobile-tab, .lmsc-dash__mobile-more-item, .lmsc-dash__mobile-more-close):focus-visible {
	outline: 2px solid var(--lmsc-primary, #1e6ff5) !important;
	outline-offset: -2px;
}

/* Width states affect the shell, never the theme's content-width variables. */
@container lmsc-dashboard (max-width: 1024px) {
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui {
		--lmsc-shell-columns: 72px minmax(0, 1fr);
		--lmsc-shell-padding: 24px;
	}
}

@container lmsc-dashboard (max-width: 768px) {
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui {
		--lmsc-shell-columns: minmax(0, 1fr);
		--lmsc-shell-padding: 16px;
		--lmsc-shell-sidebar-position: relative;
		--lmsc-shell-sidebar-min-height: 0;
		--lmsc-shell-sidebar-display: none;
		--lmsc-shell-topnav-display: none;
		--lmsc-shell-nav-display: flex;
		--lmsc-shell-more-display: grid;
	}
}

/* Five single-row buttons leave less than one readable word per label on
 * narrow phones. A local second row preserves the text and touch targets. */
@container lmsc-dashboard (max-width: 400px) {
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui {
		--lmsc-shell-nav-display: grid;
		--lmsc-shell-padding: 12px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__mobile-tab {
		flex: none;
		width: 100%;
	}
}

@container sidebar (max-width: 120px) {
	/* The section toggle is hidden in icon-only mode. Keep its routes available
	 * without changing the user's saved expanded state for the full sidebar. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__nav-section-items {
		max-height: none !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__sidebar-footer .lmsc-dash__layout-switcher {
		display: none;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__logout-btn {
		flex-direction: column;
		gap: 4px;
		min-height: 44px;
		font-size: 11px;
		line-height: 1.3;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* ResizeObserver supplies the same width state for browsers without container
 * queries. It also keeps the existing navigation JS on the same breakpoint. */
@supports not (container-type: inline-size) {
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui[data-lmsc-viewport="medium"] {
		--lmsc-shell-columns: 72px minmax(0, 1fr);
		--lmsc-shell-padding: 24px;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui[data-lmsc-viewport="compact"] {
		--lmsc-shell-columns: minmax(0, 1fr);
		--lmsc-shell-padding: 16px;
		--lmsc-shell-sidebar-position: relative;
		--lmsc-shell-sidebar-min-height: 0;
		--lmsc-shell-sidebar-display: none;
		--lmsc-shell-topnav-display: none;
		--lmsc-shell-nav-display: flex;
		--lmsc-shell-more-display: grid;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui[data-lmsc-viewport="compact"][data-lmsc-compact-columns="3"] {
		--lmsc-shell-nav-display: grid;
		--lmsc-shell-padding: 12px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-viewport="compact"][data-lmsc-compact-columns="3"] .lmsc-dash__mobile-tab {
		flex: none;
		width: 100%;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__sidebar :is(.lmsc-dash__sidebar-user, .lmsc-dash__nav-section-header, .lmsc-dash__nav-badge) {
		display: none;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__nav-item span:not(.lmsc-dash__nav-icon):not(.lmsc-dash__nav-badge) {
		display: none;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__nav-section-items {
		max-height: none !important;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__sidebar-header {
		padding: 12px 8px;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__sidebar-avatar {
		width: 40px;
		height: 40px;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) :is(.lmsc-dash__sidebar-nav, .lmsc-dash__sidebar-footer) {
		padding: 8px 4px;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__nav-item {
		justify-content: center;
		padding: 10px 0;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__sidebar-footer .lmsc-dash__layout-switcher {
		display: none;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui:is([data-lmsc-viewport="medium"], .lmsc-dash--sidebar-collapsed) .lmsc-dash__logout-btn {
		flex-direction: column;
		gap: 4px;
		padding: 10px 0;
		min-height: 44px;
		font-size: 11px;
		line-height: 1.3;
		text-align: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Header and toolbar children wrap in their available content width. Header
 * search reserves its own space while focused; it never overlays its peers.
 * 2.8.2: always a wrapping row. The older phone rule turned the header into a
 * column, which made the 220px/360px widths below into heights: about 600px
 * of empty header on every phone. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header {
	position: relative;
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center;
	align-content: flex-start;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
	overflow: visible;
	z-index: 3;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-left {
	flex: 1 1 220px;
	min-width: 0;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-greeting {
	min-width: 0;
	overflow-wrap: anywhere;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right {
	position: relative;
	display: flex;
	flex: 1 1 360px;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	width: auto;
	min-width: 0;
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > :is(.lmsc-dash__timer-icon, .lmsc-dash__notes-icon, .lmsc-dash__messaging-icon, .lmsc-dash__notification-bell, .lmsc-dash__announcements-icon) {
	display: inline-flex;
	flex: 0 0 40px;
	width: 40px;
	min-width: 40px;
	height: 40px;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right :is(button.lmsc-dash__header-action-btn, button.lmsc-dash__bell-btn, button.lmsc-dash__msg-btn) {
	box-sizing: border-box;
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 8px !important;
	line-height: 1;
	flex: 0 0 auto;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > .lmsc-dash__search {
	position: relative;
	inset: auto;
	transform: none;
	display: block !important;
	flex: 0 0 40px;
	width: 40px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	z-index: 4;
}

/* Keep the theme reset and the native focus interaction in the same cascade.
 * Logical padding below also keeps the magnifier clear of RTL input text. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > .lmsc-dash__search:focus-within,
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > .lmsc-dash__search.is-active {
	flex: 0 1 280px;
	width: 280px;
	overflow: visible;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search > input.lmsc-dash__search-input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 !important;
	border: 1px solid transparent;
	background: transparent;
	color: transparent !important;
	font-family: inherit;
	font-size: 0 !important;
	line-height: 1.4;
	cursor: pointer;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search > input.lmsc-dash__search-input::placeholder {
	color: transparent !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search:focus-within > input.lmsc-dash__search-input,
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search.is-active > input.lmsc-dash__search-input {
	padding: 8px 12px !important;
	padding-inline-start: 38px !important;
	border-color: var(--lmsc-border, #e2e8f0);
	background: var(--lmsc-surface, #fff);
	color: var(--lmsc-text, #1e293b) !important;
	font-size: 14px !important;
	cursor: text;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search:focus-within > input.lmsc-dash__search-input::placeholder,
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search.is-active > input.lmsc-dash__search-input::placeholder {
	color: var(--lmsc-text-muted, #64748b) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search-icon {
	left: auto;
	right: auto;
	inset-inline-start: 12px;
}

/* Glass skins use translucent surfaces. Give overlaid reading surfaces their
 * own opaque skin backdrop so wrapped controls cannot show through the text. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__search-results, .lmsc-dash__notification-dropdown) {
	background: linear-gradient(var(--lmsc-surface, #fff), var(--lmsc-surface, #fff)), var(--lmsc-bg, #f8fafc);
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__notification-bell {
	position: static;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__notification-dropdown {
	left: auto;
	right: auto;
	inset-inline-end: 0;
	top: calc(100% + 8px);
	width: min(440px, 100%);
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__toolbar, .lmsc-dash__filter-pills, .lmsc-dash__sort-wrap, .lmsc-reports-filters) {
	min-width: 0;
	max-width: 100%;
	flex-wrap: wrap;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search-wrap {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__search-wrap > input.lmsc-dash__search-input {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 36px;
	height: auto;
	margin: 0;
	padding: 8px 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lmsc-text, #1e293b);
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__sort-select, .lmsc-dash__pill) {
	max-width: 100%;
	min-width: 0;
	font-family: inherit;
	line-height: 1.4;
}

/* 2.8.2: a pill keeps its words on one line. Wrapping "anywhere" let the
 * My Courses filters shrink to one letter per line on phones; the row of
 * pills wraps instead (it used to scroll sideways below 900px). */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__pill {
	flex: 0 0 auto;
	white-space: nowrap;
	overflow-wrap: normal;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__filter-pills {
	flex-wrap: wrap !important;
	overflow-x: visible !important;
	white-space: normal !important;
}

/* The minimum belongs to a card, not the viewport. min(100%, ...) allows one
 * card to shrink below that preferred size in intentionally small embeds. */
/* A preferred 220px card width restores three desktop columns without
 * squeezing cards in narrow embeds. auto-fill preserves the chosen column
 * width on short final pages. The maximum comes from the saved setting. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-grid:not(:has(.lmsc-dash__quick-action)) {
	--lmsc-course-gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, calc((100% + var(--lmsc-course-gap)) / var(--lmsc-course-columns, 3) - var(--lmsc-course-gap)))), 1fr)) !important;
	gap: var(--lmsc-course-gap) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-grid > :is(.lmsc-dash__empty-state, .lmsc-dash__pagination) {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-grid:not(:has(.lmsc-dash__quick-action)) {
		--lmsc-course-gap: 16px;
	}
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__overview-grid, .lmsc-chart-row, .lmsc-dash__notes-grid) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__stats-row, .lmsc-reports-stats, .lmsc-dash__quick-actions) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

/* Secondary tabs use their own preferred card widths. Keep those widths while
 * allowing a single card to fit its actual host, including standalone UI. */
.lmsc-ui :is(.lmsc-card-grid, .lmsc-meetings-list:not(.lmsc-meetings-list--calendar)) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.lmsc-ui .lmsc-meetings-list.lmsc-meetings-list--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.lmsc-ui :is(.lmsc-gl-course-progress-grid, .lmsc-instructor__course-list) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.lmsc-ui .lmsc-gl-charts-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.lmsc-ui .lmsc-skeleton-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.lmsc-ui .lmsc-gl-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.lmsc-ui .lmsc-admin-dash__stats {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.lmsc-ui .lmsc-skeleton-stats {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-reports-stats--extended {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
}

.lmsc-ui .lmsc-ce-totals {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}

.lmsc-ui .lmsc-learner-kpis {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}

.lmsc-ui :is(.lmsc-card-grid, .lmsc-meetings-list, .lmsc-gl-course-progress-grid, .lmsc-instructor__course-list, .lmsc-gl-charts-grid, .lmsc-skeleton-grid, .lmsc-gl-cards, .lmsc-admin-dash__stats, .lmsc-skeleton-stats, .lmsc-ce-totals, .lmsc-learner-kpis) > * {
	min-width: 0;
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-container--list .lmsc-dash__courses-grid:not(:has(.lmsc-dash__quick-action)),
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-grid:has(.lmsc-dash__course-card--minimal) {
	grid-template-columns: minmax(0, 1fr) !important;
}

/* Minimal cards keep their compact list spacing. Let labels wrap within the
 * card so longer course actions remain reachable in small builder columns. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__courses-grid:has(.lmsc-dash__course-card--minimal) {
	--lmsc-course-gap: 8px;
}

.lmsc-ui :is(.lmsc-dash__course-minimal-top, .lmsc-dash__course-minimal-meta) {
	flex-wrap: wrap;
	min-width: 0;
}

.lmsc-ui .lmsc-dash__course-minimal-link {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.lmsc-ui .lmsc-dash__course-minimal-progress .lmsc-dash__progress-bar {
	min-width: 0;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__courses-grid, .lmsc-dash__overview-grid, .lmsc-dash__stats-row, .lmsc-chart-row, .lmsc-reports-stats, .lmsc-dash__quick-actions, .lmsc-dash__profile-grid) > * {
	min-width: 0;
	max-width: 100%;
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__stat-label, .lmsc-dash__course-title, .lmsc-dash__widget-header h3) {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Translated widget actions may be wider than a whole card. Preserve the
 * icon/text group while allowing its label to wrap inside the button. */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__widget-header-action {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Standalone components share the media contract without adopting the full
 * dashboard layout. Their original inline preferred card widths may shrink. */
.lmsc-component.lmsc-ui,
.lmsc-zm-embed.lmsc-ui {
	min-width: 0;
	max-width: 100%;
}

.lmsc-component--courses.lmsc-ui > .lmsc-dash__courses-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.lmsc-component--stats.lmsc-ui {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

.lmsc-component--certificates.lmsc-ui {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.lmsc-component.lmsc-ui > *,
.lmsc-component.lmsc-ui .lmsc-dash__course-card,
.lmsc-zm-embed.lmsc-ui > * {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.lmsc-zm-embed--compact.lmsc-ui {
	flex-wrap: wrap;
	gap: 12px;
}

/* 2.8.2: calendar days may shrink to the column (a day's content no longer
 * sets a minimum width for the whole month). */
.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-schedule-calendar__weekdays, .lmsc-schedule-calendar__grid) {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-schedule-calendar__grid > * {
	min-width: 0;
}

/* Scroll actual tables inside their labelled viewports. Do not hide overflow
 * on whole pages as that silently makes controls and columns unreachable. */
.lmsc-ui :is(.lmsc-data-table-wrap, .lmsc-dash__table-wrap, .lmsc-report-table-viewport, .lmsc-gl-members-table-wrap, .lmsc-roster-table-wrap, .lmsc-mx-wrap, .lmsc-ce-table-wrap, .lmsc-instructor__analytics-table-wrap, .lmsc-instructor__earnings-table-wrap) {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

@container lmsc-dashboard-main (max-width: 800px) {
	.lmsc-dash.lmsc-ui :is(.lmsc-dash__profile-grid, .lmsc-personal-report-grid, .lmsc-qr-charts) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 2.8.2: when the tools wrap below the title (the two header halves need
 * 592px side by side), they start at the same edge as the title. The shell
 * prefix lets this beat the flex-end rule above. */
@container lmsc-dashboard-main (max-width: 591px) {
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right {
		justify-content: flex-start;
	}
}

@container lmsc-dashboard-main (max-width: 640px) {
	.lmsc-dash.lmsc-ui .lmsc-dash__header-right {
		justify-content: flex-start;
	}
	.lmsc-dash.lmsc-ui .lmsc-dash__welcome-banner {
		flex-wrap: wrap;
		gap: 16px;
		padding: 20px;
	}
	.lmsc-dash.lmsc-ui .lmsc-dash__welcome-left {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
	.lmsc-dash.lmsc-ui .lmsc-dash__courses-container--list .lmsc-dash__course-card {
		grid-template-columns: minmax(0, 1fr);
	}
	.lmsc-dash.lmsc-ui .lmsc-dash__courses-container--list .lmsc-dash__course-thumbnail {
		height: 160px;
	}
	.lmsc-dash.lmsc-ui :is(.lmsc-dash__form-row, .lmsc-dash__section-header, .lmsc-dash__pagination) {
		flex-wrap: wrap;
	}
	/* 2.8.2: the stacked Schedule calendar fills the column instead of
	 * keeping its desktop width and losing Friday and Saturday off the edge. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-schedule-body__calendar {
		align-self: stretch;
		width: 100%;
	}
}

@supports not (container-type: inline-size) {
	.lmsc-dash.lmsc-ui:is([data-lmsc-main-width="medium"], [data-lmsc-main-width="narrow"]) :is(.lmsc-dash__profile-grid, .lmsc-personal-report-grid, .lmsc-qr-charts) {
		grid-template-columns: minmax(0, 1fr);
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-dash__header-right {
		justify-content: flex-start;
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-dash__welcome-banner {
		gap: 16px;
		padding: 20px;
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-dash__welcome-left {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-dash__courses-container--list .lmsc-dash__course-card {
		grid-template-columns: minmax(0, 1fr);
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-dash__courses-container--list .lmsc-dash__course-thumbnail {
		height: 160px;
	}
	.lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] :is(.lmsc-dash__welcome-banner, .lmsc-dash__form-row, .lmsc-dash__section-header, .lmsc-dash__pagination) {
		flex-wrap: wrap;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-width="narrow"] .lmsc-schedule-body__calendar {
		align-self: stretch;
		width: 100%;
	}
}

/* 2.8.2 phone layout (client report: "unnecessary blank spaces, elements
 * out of place"). Applies when the dashboard's content column is phone-sized,
 * whatever the screen. Older rules for a fixed bottom bar and desktop card
 * heights left large empty areas here. */
@container lmsc-dashboard-main (max-width: 480px) {
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header {
		gap: 10px;
		padding: 4px 0 12px;
		margin-bottom: 14px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__header-left, .lmsc-dash__header-right) {
		flex: 1 1 100%;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right {
		gap: 6px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-left h1,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__page-title {
		font-size: 20px;
		line-height: 1.25;
	}
	/* The blank space below the last card was reserved twice (160px) for a
	 * floating button that phones no longer show. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__content {
		padding-bottom: 24px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__panel {
		padding-bottom: 0 !important;
	}
	/* Welcome banner: photo and greeting on one row, progress ring below. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-banner {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: flex-start;
		gap: 12px;
		padding: 16px !important;
		margin-bottom: 14px;
		text-align: start !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-left {
		flex: 1 1 100%;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 12px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-avatar {
		width: 48px;
		height: 48px;
		margin: 0 !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-text :is(h2, h3) {
		margin: 0 0 2px;
		font-size: 18px !important;
		line-height: 1.25;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-text p {
		font-size: 13px !important;
		line-height: 1.4;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-progress {
		flex-direction: row !important;
		align-items: center;
		gap: 10px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-ring,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-ring svg {
		width: 44px !important;
		height: 44px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__welcome-ring-label {
		max-width: none;
		text-align: start;
	}
	/* Two stat cards per row, each one line of icon and number. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stats-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-bottom: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-card {
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: space-between;
		gap: 8px;
		min-width: 0;
		min-height: 0;
		padding: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-info {
		flex: 1 1 auto;
		min-width: 0;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-label {
		display: block;
		font-size: 11px !important;
		line-height: 1.3;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		overflow-wrap: break-word;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-value {
		margin-top: 4px;
		font-size: 20px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-icon {
		width: 30px !important;
		height: 30px !important;
		margin: 0 !important;
		border-radius: 9px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__stat-icon svg {
		width: 16px;
		height: 16px;
	}
	/* One column of cards: no desktop "equal height" minimums. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__overview-grid {
		gap: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__overview-grid > .lmsc-dash__widget,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__widget--todo {
		min-height: 0 !important;
		padding: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui :is(.lmsc-dash__continue-section, .lmsc-dash__stats-row, .lmsc-dash__overview-grid) .lmsc-dash__empty-state {
		padding: 20px 12px;
	}
	/* Group management: compact numbers, tool rows start at the left edge. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stat-card {
		padding: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stat-icon {
		margin-bottom: 4px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stat-icon svg {
		width: 22px;
		height: 22px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stat-value {
		font-size: 22px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-stat-label {
		font-size: 11px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-section-toolbar {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-toolbar {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-gl-mgmt {
		flex-wrap: wrap;
		margin-left: 0 !important;
	}
	/* Calendar days are about 50px wide: event types become coloured dots
	 * (the words stay readable to screen readers and in the day list). */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-cal-type-label {
		width: 6px;
		height: 6px;
		padding: 0;
		border-radius: 50%;
		background: currentColor !important;
		font-size: 0;
		line-height: 0;
		overflow: hidden;
	}
}

/* Up to 7 header tools fit one row on a 320px-wide content column. */
@container lmsc-dashboard-main (max-width: 400px) {
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > :is(.lmsc-dash__timer-icon, .lmsc-dash__notes-icon, .lmsc-dash__messaging-icon, .lmsc-dash__notification-bell, .lmsc-dash__announcements-icon, .lmsc-dash__search) {
		flex: 0 0 36px;
		width: 36px;
		min-width: 36px;
		height: 36px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right :is(button.lmsc-dash__header-action-btn, button.lmsc-dash__bell-btn, button.lmsc-dash__msg-btn) {
		width: 36px !important;
		min-width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		padding: 7px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-right > .lmsc-dash__search > input.lmsc-dash__search-input {
		height: 36px;
		min-height: 36px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui .lmsc-dash__header-avatar {
		width: 36px;
		height: 36px;
	}
}

/* The same phone layout where container queries are missing (iOS 15 and
 * older). dashboard.js sets data-lmsc-main-phone from the measured column. */
@supports not (container-type: inline-size) {
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__header {
		gap: 10px;
		padding: 4px 0 12px;
		margin-bottom: 14px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] :is(.lmsc-dash__header-left, .lmsc-dash__header-right) {
		flex: 1 1 100%;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__header-right {
		gap: 6px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__header-left h1,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__page-title {
		font-size: 20px;
		line-height: 1.25;
	}
	/* The blank space below the last card was reserved twice (160px) for a
	 * floating button that phones no longer show. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__content {
		padding-bottom: 24px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__panel {
		padding-bottom: 0 !important;
	}
	/* Welcome banner: photo and greeting on one row, progress ring below. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-banner {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: flex-start;
		gap: 12px;
		padding: 16px !important;
		margin-bottom: 14px;
		text-align: start !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-left {
		flex: 1 1 100%;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 12px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-avatar {
		width: 48px;
		height: 48px;
		margin: 0 !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-text :is(h2, h3) {
		margin: 0 0 2px;
		font-size: 18px !important;
		line-height: 1.25;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-text p {
		font-size: 13px !important;
		line-height: 1.4;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-progress {
		flex-direction: row !important;
		align-items: center;
		gap: 10px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-ring,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-ring svg {
		width: 44px !important;
		height: 44px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__welcome-ring-label {
		max-width: none;
		text-align: start;
	}
	/* Two stat cards per row, each one line of icon and number. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stats-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-bottom: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-card {
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: space-between;
		gap: 8px;
		min-width: 0;
		min-height: 0;
		padding: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-info {
		flex: 1 1 auto;
		min-width: 0;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-label {
		display: block;
		font-size: 11px !important;
		line-height: 1.3;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		overflow-wrap: break-word;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-value {
		margin-top: 4px;
		font-size: 20px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-icon {
		width: 30px !important;
		height: 30px !important;
		margin: 0 !important;
		border-radius: 9px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__stat-icon svg {
		width: 16px;
		height: 16px;
	}
	/* One column of cards: no desktop "equal height" minimums. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__overview-grid {
		gap: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__overview-grid > .lmsc-dash__widget,
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-dash__widget--todo {
		min-height: 0 !important;
		padding: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] :is(.lmsc-dash__continue-section, .lmsc-dash__stats-row, .lmsc-dash__overview-grid) .lmsc-dash__empty-state {
		padding: 20px 12px;
	}
	/* Group management: compact numbers, tool rows start at the left edge. */
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 16px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stat-card {
		padding: 12px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stat-icon {
		margin-bottom: 4px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stat-icon svg {
		width: 22px;
		height: 22px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stat-value {
		font-size: 22px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-stat-label {
		font-size: 11px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-section-toolbar {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-toolbar {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-gl-mgmt {
		flex-wrap: wrap;
		margin-left: 0 !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone] .lmsc-cal-type-label {
		width: 6px;
		height: 6px;
		padding: 0;
		border-radius: 50%;
		background: currentColor !important;
		font-size: 0;
		line-height: 0;
		overflow: hidden;
	}

	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone="xs"] .lmsc-dash__header-right > :is(.lmsc-dash__timer-icon, .lmsc-dash__notes-icon, .lmsc-dash__messaging-icon, .lmsc-dash__notification-bell, .lmsc-dash__announcements-icon, .lmsc-dash__search) {
		flex: 0 0 36px;
		width: 36px;
		min-width: 36px;
		height: 36px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone="xs"] .lmsc-dash__header-right :is(button.lmsc-dash__header-action-btn, button.lmsc-dash__bell-btn, button.lmsc-dash__msg-btn) {
		width: 36px !important;
		min-width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		padding: 7px !important;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone="xs"] .lmsc-dash__header-right > .lmsc-dash__search > input.lmsc-dash__search-input {
		height: 36px;
		min-height: 36px;
	}
	.lmsc-dashboard-shell .lmsc-dash.lmsc-ui[data-lmsc-main-phone="xs"] .lmsc-dash__header-avatar {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .lmsc-dashboard-shell { --lmsc-admin-bar-height: 46px; }
}

@media (min-width: 783px) {
	body.admin-bar .lmsc-dashboard-shell { --lmsc-admin-bar-height: 32px; }
}

@media print {
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui {
		--lmsc-shell-columns: minmax(0, 1fr);
		--lmsc-shell-padding: 0;
	}
	.lmsc-dashboard-shell > .lmsc-dash.lmsc-ui > :is(.lmsc-dash__sidebar, .lmsc-dash__mobile-tabs, .lmsc-dash__mobile-more-drawer) {
		display: none !important;
	}
}