/*
 * Live Meetings, Live Webinars, Import, Categories and API logs.
 *
 * These screens are drawn with All Meetings' own parts (`zmeet-am-*` in
 * components/dashboard/all-meetings.css): the same header, toolbar, tab strip,
 * search box, primary button, table panel, rows, chips, row menu, bulk bar,
 * pager and empty state. This file only adds what those screens have and All
 * Meetings does not: their own column grids, sortable column heads, a status
 * pill, a skeleton, the Import summary panel, and the category drawer.
 *
 * Every value is one of All Meetings' tokens or a number it already uses, so
 * the screens read as the same product. The table has no size container here
 * (row menus are fixed-position and a container would trap them), so the
 * responsive rules are viewport media queries, as All Meetings' own are.
 */

/* --------------------------------------------------------------- shell -- */

.zmeet-am-header__bar.zmeet-lx-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
}

.zmeet-am .zmeet-lx-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The settings section already supplies a column; inside it the parts are
   used without All Meetings' page width and gutters. */
.zmeet-am.zmeet-lx-flush {
	max-width: none;
	margin: 0;
	padding: 0;
}

.zmeet-am .zmeet-lx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- toolbar -- */

.zmeet-am .zmeet-lx-host {
	width: 220px;
}

.zmeet-am .zmeet-lx-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var( --zmeet-am-control-edge );
	border-radius: var( --zmeet-am-radius-control, 10px );
	background: var( --zmeet-am-panel );
	color: var( --zmeet-am-ink-soft );
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.zmeet-am .zmeet-lx-iconbtn:hover {
	border-color: var( --zmeet-am-control-edge-hover );
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-iconbtn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.zmeet-am .zmeet-lx-iconbtn.is-busy svg {
	animation: zmeet-lx-spin 900ms linear infinite;
}

@keyframes zmeet-lx-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* A locked tab keeps its Pro badge on the label line. */
.zmeet-am .zmeet-am-tab .zmeet-tw {
	display: inline-flex;
}

.zmeet-am .zmeet-am-tab.is-locked {
	color: var( --zmeet-am-ink-faint );
}

/* The tab strip used as a form control rather than a list filter. */
.zmeet-am .zmeet-lx-seg {
	display: flex;
	width: 100%;
}

.zmeet-am .zmeet-lx-seg .zmeet-am-tab {
	flex: 1 1 0;
	justify-content: center;
}

@media ( max-width: 782px ) {

	.zmeet-am .zmeet-lx-host,
	.zmeet-am .zmeet-am-tools .zmeet-am-search {
		width: 100%;
	}

	.zmeet-am .zmeet-am-toolbar .zmeet-am-tabs {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.zmeet-am .zmeet-lx-tools-row {
		display: flex;
		gap: 10px;
		width: 100%;
	}

	.zmeet-am .zmeet-lx-tools-row > .zmeet-am-search,
	.zmeet-am .zmeet-lx-tools-row > .zmeet-lx-host {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media ( min-width: 783px ) {

	.zmeet-am .zmeet-lx-tools-row {
		display: contents;
	}
}

/* -------------------------------------------------------------- tables -- */

.zmeet-am .zmeet-lx-table .zmeet-am-head,
.zmeet-am .zmeet-lx-table .zmeet-am-row {
	position: relative;
	display: grid;
	gap: 16px;
	padding: 0 20px;
}

.zmeet-am .zmeet-lx-table .zmeet-am-row {
	min-height: 66px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.zmeet-am .zmeet-lx-table .zmeet-am-row.is-picked {
	background: var( --zmeet-am-brand-tint );
}

.zmeet-am .zmeet-lx-table .zmeet-am-head {
	min-height: 40px;
}

.zmeet-am .zmeet-lx-table.is-busy .zmeet-am-row {
	opacity: 0.6;
	transition: opacity 150ms ease;
}

/* Live: check, item, type, on site, start, actions. */
.zmeet-am .zmeet-lx-table--live .zmeet-am-head,
.zmeet-am .zmeet-lx-table--live .zmeet-am-row {
	grid-template-columns: 32px minmax( 200px, 1fr ) 110px 118px minmax( 168px, 200px ) 132px;
}

/* Import: no row actions. */
.zmeet-am .zmeet-lx-table--pick .zmeet-am-head,
.zmeet-am .zmeet-lx-table--pick .zmeet-am-row {
	grid-template-columns: 32px minmax( 180px, 1fr ) 100px 104px minmax( 150px, 180px );
}

/* Categories: name, slug, meetings, actions. */
.zmeet-am .zmeet-lx-table--cats .zmeet-am-head,
.zmeet-am .zmeet-lx-table--cats .zmeet-am-row {
	grid-template-columns: minmax( 220px, 1fr ) minmax( 140px, 240px ) 110px 92px;
}

/* Logs: when, status, request, time taken, details. */
.zmeet-am .zmeet-lx-table--logs .zmeet-am-head,
.zmeet-am .zmeet-lx-table--logs .zmeet-am-row {
	grid-template-columns: 132px 76px minmax( 0, 1fr ) 84px 44px;
}

.zmeet-am .zmeet-lx-table .zmeet-am-cell--end {
	display: flex;
	justify-content: flex-end;
	text-align: right;
}

.zmeet-am .zmeet-lx-table .zmeet-am-cell--actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

/* Rows are always pickable on these screens; selection is what they are for. */
.zmeet-am .zmeet-lx-table .zmeet-am-box {
	opacity: 1;
	transform: none;
}

.zmeet-am .zmeet-lx-table .zmeet-am-cell--check {
	display: flex;
	align-items: center;
	justify-content: center;
}

.zmeet-am .zmeet-lx-table span.zmeet-am-title {
	cursor: default;
}

.zmeet-am .zmeet-lx-table span.zmeet-am-title:hover {
	color: var( --zmeet-am-ink );
}

.zmeet-am a.zmeet-am-title,
.zmeet-am a.zmeet-am-title:visited {
	text-decoration: none;
}

.zmeet-am .zmeet-lx-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.zmeet-am .zmeet-lx-num {
	font-variant-numeric: tabular-nums;
}

/* Sortable column head: the label itself is the button. */
.zmeet-am .zmeet-lx-sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 -6px;
	padding: 4px 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
	transition: color 150ms ease, background-color 150ms ease;
}

.zmeet-am .zmeet-lx-sort:hover {
	background: var( --zmeet-am-line-soft );
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-sort.is-sorted {
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-sort svg {
	opacity: 0.45;
}

.zmeet-am .zmeet-lx-sort.is-sorted svg {
	opacity: 1;
	color: var( --zmeet-am-brand );
}

/* Status pill: on site, draft, not on site. Same build as `.zmeet-am-kind`. */
.zmeet-am .zmeet-lx-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	color: var( --zmeet-am-ink-soft );
	background: var( --zmeet-am-line-soft );
}

.zmeet-am .zmeet-lx-pill::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

.zmeet-am .zmeet-lx-pill.is-good {
	color: var( --zmeet-am-good );
	background: var( --zmeet-am-good-tint );
}

.zmeet-am .zmeet-lx-pill.is-warn {
	color: var( --zmeet-am-warn );
	background: var( --zmeet-am-warn-tint );
}

.zmeet-am .zmeet-lx-pill.is-bad {
	color: var( --zmeet-am-bad );
	background: var( --zmeet-am-bad-tint );
}

.zmeet-am .zmeet-lx-pill.is-plain::before {
	display: none;
}

/* HTTP method, beside the endpoint. */
.zmeet-am .zmeet-lx-method {
	display: inline-flex;
	align-items: center;
	min-width: 46px;
	justify-content: center;
	padding: 1px 6px;
	border-radius: 5px;
	background: var( --zmeet-am-line-soft );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --zmeet-am-ink-soft );
}

.zmeet-am .zmeet-lx-method.is-post {
	background: var( --zmeet-am-brand-tint );
	color: var( --zmeet-am-brand-700 );
}

.zmeet-am .zmeet-lx-method.is-delete {
	background: var( --zmeet-am-bad-tint );
	color: var( --zmeet-am-bad );
}

.zmeet-am .zmeet-lx-method.is-patch,
.zmeet-am .zmeet-lx-method.is-put {
	background: var( --zmeet-am-warn-tint );
	color: var( --zmeet-am-warn );
}

/* Meeting count, linking to All Meetings narrowed to the category. */
.zmeet-am .zmeet-lx-count,
.zmeet-am .zmeet-lx-count:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: var( --zmeet-am-brand-tint );
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --zmeet-am-brand-700 );
	text-decoration: none;
	transition: background-color 150ms ease;
}

.zmeet-am a.zmeet-lx-count:hover,
.zmeet-am a.zmeet-lx-count:focus {
	background: var( --zmeet-am-brand-line );
	color: var( --zmeet-am-brand-700 );
}

.zmeet-am span.zmeet-lx-count {
	background: var( --zmeet-am-line-soft );
	color: var( --zmeet-am-ink-faint );
}

/* Child categories: indented under a soft elbow. */
.zmeet-am .zmeet-lx-elbow {
	flex: none;
	color: #cbd5e1;
}

/* Delete in a row's icon group turns red under the pointer only. */
.zmeet-am .zmeet-am-btn--row.zmeet-lx-danger:hover,
.zmeet-am .zmeet-am-btn--row.zmeet-lx-danger:focus-visible {
	background: var( --zmeet-am-bad-tint );
	color: var( --zmeet-am-bad );
}

/* Row menu item: label left, Pro badge right. */
.zmeet-am .zmeet-am-menu__panel .zmeet-lx-menu-item {
	justify-content: space-between;
	gap: 12px;
	white-space: nowrap;
}

.zmeet-am .zmeet-am-menu__panel.zmeet-lx-menu {
	z-index: 99990;
	max-width: calc( 100vw - 16px );
	animation: zmeet-lx-fade 120ms ease-out both;
}

/* Only on narrow screens: facts the hidden columns would have shown. */
.zmeet-am .zmeet-lx-narrow {
	display: none;
}

/* ------------------------------------------------------------ skeleton -- */

.zmeet-am .zmeet-lx-skel {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100% );
	background-size: 200% 100%;
	animation: zmeet-lx-shimmer 1.4s ease-in-out infinite;
}

@keyframes zmeet-lx-shimmer {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -100% 0;
	}
}

@keyframes zmeet-lx-fade {
	from {
		opacity: 0;
		transform: translateY( -2px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------- notes -- */

.zmeet-am .zmeet-lx-note {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #f7dfb8;
	border-radius: var( --zmeet-am-radius-control, 10px );
	background: var( --zmeet-am-warn-tint );
	font-size: 13px;
	font-weight: 500;
	color: #7a4300;
}

/* --------------------------------------------------------------- panel -- */

.zmeet-am .zmeet-lx-panel {
	border-radius: var( --zmeet-am-radius-panel, 14px );
	background: var( --zmeet-am-panel );
	box-shadow: var( --zmeet-am-panel-shadow );
}

/* Import: list on the left, the decision on the right. */
.zmeet-am .zmeet-lx-split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: 20px;
	align-items: start;
}

.zmeet-am .zmeet-lx-aside {
	position: sticky;
	top: 46px;
	display: flex;
	flex-direction: column;
}

.zmeet-am .zmeet-lx-aside__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border-top: 1px solid var( --zmeet-am-line-soft );
}

.zmeet-am .zmeet-lx-aside__block:first-child {
	border-top: 0;
}

.zmeet-am .zmeet-lx-label {
	font-size: 12px;
	font-weight: 600;
	color: var( --zmeet-am-ink-soft );
}

.zmeet-am .zmeet-lx-figure {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.zmeet-am .zmeet-lx-figure__num {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-figure__label {
	font-size: 13px;
	font-weight: 500;
	color: var( --zmeet-am-ink-faint );
}

.zmeet-am .zmeet-lx-linkbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: 0 -8px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var( --zmeet-am-brand-700 );
	cursor: pointer;
	transition: background-color 150ms ease;
}

.zmeet-am .zmeet-lx-linkbtn:hover {
	background: var( --zmeet-am-brand-tint );
}

.zmeet-am .zmeet-lx-linkbtn[disabled] {
	color: var( --zmeet-am-ink-faint );
	background: transparent;
	cursor: not-allowed;
}

.zmeet-am .zmeet-lx-wide {
	width: 100%;
	justify-content: center;
	min-height: 48px;
	font-size: 14px;
}

/* Switch, on All Meetings' brand. */
.zmeet-am .zmeet-lx-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.zmeet-am .zmeet-lx-switch__track {
	position: relative;
	flex: none;
	width: 40px;
	height: 24px;
	border-radius: 999px;
	background: #cbd5e1;
	transition: background-color 150ms ease;
}

.zmeet-am .zmeet-lx-switch__track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.2 );
	transition: transform 150ms ease;
}

.zmeet-am .zmeet-lx-switch input:checked + .zmeet-lx-switch__track {
	background: var( --zmeet-am-brand );
}

.zmeet-am .zmeet-lx-switch input:checked + .zmeet-lx-switch__track::after {
	transform: translateX( 16px );
}

.zmeet-am .zmeet-lx-switch input:focus-visible + .zmeet-lx-switch__track {
	outline: 2px solid var( --zmeet-am-brand );
	outline-offset: 2px;
}

/* Progress through the import. */
.zmeet-am .zmeet-lx-progress {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --zmeet-am-line-soft );
}

.zmeet-am .zmeet-lx-progress__bar {
	height: 100%;
	border-radius: 999px;
	background: var( --zmeet-am-brand );
	transition: width 300ms ease;
}

.zmeet-am .zmeet-lx-results {
	display: flex;
	flex-direction: column;
	max-height: 280px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.zmeet-am .zmeet-lx-results li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var( --zmeet-am-line-soft );
	font-size: 13px;
}

.zmeet-am .zmeet-lx-results li:first-child {
	border-top: 0;
}

.zmeet-am .zmeet-lx-results__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-results__error {
	display: block;
	font-weight: 500;
	white-space: normal;
	color: var( --zmeet-am-bad );
}

.zmeet-am .zmeet-lx-results a {
	font-weight: 600;
	color: var( --zmeet-am-brand-700 );
	text-decoration: none;
}

.zmeet-am .zmeet-lx-results a:hover {
	text-decoration: underline;
}

/* Narrow screens: the Import button rides along at the bottom. */
.zmeet-am .zmeet-lx-dock {
	display: none;
}

/* -------------------------------------------------------------- drawer -- */

.zmeet-am .zmeet-lx-scrim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 15, 23, 42, 0.4 );
	animation: zmeet-lx-scrim 160ms ease-out both;
}

.zmeet-am .zmeet-lx-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: min( 440px, 100vw );
	background: var( --zmeet-am-panel );
	box-shadow: -24px 0 48px rgba( 13, 21, 38, 0.16 );
	animation: zmeet-lx-slide 220ms cubic-bezier( 0.2, 0.8, 0.3, 1 ) both;
}

.admin-bar .zmeet-am .zmeet-lx-drawer {
	top: 32px;
}

.zmeet-am .zmeet-lx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 18px 24px;
	border-bottom: 1px solid var( --zmeet-am-line );
}

.zmeet-am .zmeet-lx-drawer__title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-drawer__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.zmeet-am .zmeet-lx-drawer__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	overflow-y: auto;
}

.zmeet-am .zmeet-lx-drawer__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid var( --zmeet-am-line );
	background: #fbfcfe;
}

.zmeet-am .zmeet-lx-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zmeet-am .zmeet-lx-field > label {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --zmeet-am-ink-soft );
}

.zmeet-am .zmeet-lx-field input[type='text'],
.zmeet-am .zmeet-lx-field textarea {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var( --zmeet-am-control-edge );
	border-radius: var( --zmeet-am-radius-sm );
	background: var( --zmeet-am-panel );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var( --zmeet-am-ink );
	box-shadow: none;
	transition: border-color 150ms ease;
}

.zmeet-am .zmeet-lx-field input[type='text']:hover,
.zmeet-am .zmeet-lx-field textarea:hover {
	border-color: var( --zmeet-am-control-edge-hover );
}

.zmeet-am .zmeet-lx-field input[type='text']:focus,
.zmeet-am .zmeet-lx-field textarea:focus {
	border-color: var( --zmeet-am-brand );
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 11, 92, 255, 0.14 );
}

.zmeet-am .zmeet-lx-field [aria-invalid='true'] {
	border-color: var( --zmeet-am-bad );
}

.zmeet-am .zmeet-lx-field .zmeet-lx-hint {
	font-size: 12px;
	color: var( --zmeet-am-ink-faint );
}

.zmeet-am .zmeet-lx-field .zmeet-lx-error {
	font-size: 12.5px;
	font-weight: 500;
	color: var( --zmeet-am-bad );
}

.zmeet-am .zmeet-lx-field input.zmeet-lx-mono-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

@keyframes zmeet-lx-slide {
	from {
		transform: translateX( 24px );
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes zmeet-lx-scrim {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ---------------------------------------------------------- logs stats -- */

.zmeet-am .zmeet-lx-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.zmeet-am .zmeet-lx-stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12.5px;
	color: var( --zmeet-am-ink-faint );
}

.zmeet-am .zmeet-lx-stat strong {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --zmeet-am-ink );
}

.zmeet-am .zmeet-lx-stat.is-bad strong {
	color: var( --zmeet-am-bad );
}

/* ---------------------------------------------------------- responsive -- */

@media ( max-width: 1200px ) {

	.zmeet-am .zmeet-lx-table--live .zmeet-am-head,
	.zmeet-am .zmeet-lx-table--live .zmeet-am-row {
		grid-template-columns: 32px minmax( 0, 1fr ) 104px minmax( 150px, 176px ) 132px;
	}

	.zmeet-am .zmeet-lx-table--live .zmeet-am-cell--type {
		display: none;
	}

	.zmeet-am .zmeet-lx-split {
		grid-template-columns: minmax( 0, 1fr ) 300px;
	}

	.zmeet-am .zmeet-lx-table--pick .zmeet-am-head,
	.zmeet-am .zmeet-lx-table--pick .zmeet-am-row {
		grid-template-columns: 32px minmax( 0, 1fr ) 96px minmax( 140px, 168px );
	}

	.zmeet-am .zmeet-lx-table--pick .zmeet-am-cell--type {
		display: none;
	}
}

@media ( max-width: 1024px ) {

	.zmeet-am .zmeet-lx-split {
		grid-template-columns: minmax( 0, 1fr );
	}

	.zmeet-am .zmeet-lx-aside {
		position: static;
	}

	.zmeet-am .zmeet-lx-dock {
		position: sticky;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 calc( -1 * var( --zmeet-page-gutter, 24px ) );
		padding: 12px var( --zmeet-page-gutter, 24px );
		border-top: 1px solid var( --zmeet-am-line );
		background: rgba( 255, 255, 255, 0.96 );
		box-shadow: 0 -8px 24px rgba( 13, 21, 38, 0.06 );
		font-size: 13.5px;
		font-weight: 600;
	}
}

@media ( max-width: 860px ) {

	.zmeet-am .zmeet-lx-table .zmeet-am-head {
		display: none;
	}

	.zmeet-am .zmeet-lx-narrow {
		display: inline-flex;
	}

	.zmeet-am .zmeet-lx-table--live .zmeet-am-row,
	.zmeet-am .zmeet-lx-table--pick .zmeet-am-row {
		grid-template-columns: 32px minmax( 0, 1fr ) auto;
		grid-template-areas:
			'check main actions'
			'.     when actions';
		row-gap: 4px;
		padding: 12px 16px;
		align-items: start;
	}

	.zmeet-am .zmeet-lx-table--pick .zmeet-am-row {
		grid-template-areas:
			'check main'
			'.     when';
		grid-template-columns: 32px minmax( 0, 1fr );
	}

	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--check {
		grid-area: check;
		min-height: 20px;
	}

	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--main {
		grid-area: main;
	}

	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--when {
		grid-area: when;
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}

	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--actions {
		grid-area: actions;
		align-self: center;
	}

	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--type,
	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--site,
	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--slug,
	.zmeet-am .zmeet-lx-table .zmeet-am-row .zmeet-am-cell--duration {
		display: none;
	}

	.zmeet-am .zmeet-lx-table--live .zmeet-am-row .zmeet-am-cell--actions .zmeet-am-btn--icon {
		display: none;
	}

	.zmeet-am .zmeet-lx-table--cats .zmeet-am-row {
		grid-template-columns: minmax( 0, 1fr ) auto auto;
		grid-template-areas: 'main count actions';
		padding: 12px 16px;
	}

	.zmeet-am .zmeet-lx-table--cats .zmeet-am-row .zmeet-am-cell--count {
		grid-area: count;
	}

	.zmeet-am .zmeet-lx-table--logs .zmeet-am-row {
		grid-template-columns: auto minmax( 0, 1fr ) 44px;
		grid-template-areas:
			'status main actions'
			'.      when actions';
		row-gap: 2px;
		padding: 10px 12px 10px 16px;
	}

	.zmeet-am .zmeet-lx-table--logs .zmeet-am-row .zmeet-am-cell--status {
		grid-area: status;
		align-self: start;
	}
}

@media ( max-width: 600px ) {

	.zmeet-am .zmeet-lx-table--cats .zmeet-am-row {
		grid-template-columns: minmax( 0, 1fr ) auto;
		grid-template-areas:
			'main  actions'
			'count actions';
		row-gap: 6px;
	}

	.zmeet-am .zmeet-lx-table--cats .zmeet-am-row .zmeet-am-cell--count {
		justify-content: flex-start;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.zmeet-am .zmeet-lx-skel,
	.zmeet-am .zmeet-lx-iconbtn.is-busy svg,
	.zmeet-am .zmeet-lx-drawer,
	.zmeet-am .zmeet-lx-scrim,
	.zmeet-am .zmeet-am-menu__panel.zmeet-lx-menu {
		animation: none;
	}

	.zmeet-am .zmeet-lx-progress__bar,
	.zmeet-am .zmeet-lx-switch__track,
	.zmeet-am .zmeet-lx-switch__track::after {
		transition: none;
	}
}

.zmeet-am .zmeet-lx-meta {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --zmeet-am-ink-soft );
}

/* Inside a stack the gap is the spacing; the parts' own bottom margins go. */
.zmeet-am .zmeet-lx-stack > .zmeet-am-toolbar,
.zmeet-am .zmeet-lx-stack > .zmeet-am-bulk {
	margin-bottom: 0;
}

.zmeet-am .zmeet-am-btn--quiet.zmeet-lx-danger-text {
	color: var( --zmeet-am-bad );
}

.zmeet-am .zmeet-am-btn--quiet.zmeet-lx-danger-text:hover,
.zmeet-am .zmeet-am-btn--quiet.zmeet-lx-danger-text:focus-visible {
	background: var( --zmeet-am-bad-tint );
	color: var( --zmeet-am-bad );
}

/* Tables without a checkbox column start their row rule at the panel edge. */
.zmeet-am .zmeet-lx-table--cats,
.zmeet-am .zmeet-lx-table--logs {
	--zmeet-am-line-inset: 20px;
}

/* Logs read time first, left-aligned like every other first column. */
.zmeet-am .zmeet-lx-table--logs .zmeet-am-cell--when {
	align-items: flex-start;
	text-align: left;
}

.zmeet-am .zmeet-lx-table--logs .zmeet-am-row .zmeet-am-cell--when .zmeet-am-when {
	font-size: 12.5px;
	color: var( --zmeet-am-ink-soft );
}

/* Facts in the log detail drawer. */
.zmeet-am .zmeet-lx-facts {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px 24px;
	margin: 0;
	padding: 0;
}

.zmeet-am .zmeet-lx-facts > div {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.zmeet-am .zmeet-lx-facts .is-wide {
	grid-column: 1 / -1;
}

.zmeet-am .zmeet-lx-facts dt {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var( --zmeet-am-ink-faint );
}

.zmeet-am .zmeet-lx-facts dd {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --zmeet-am-ink );
	overflow-wrap: anywhere;
}

/* Phones: the filter strip spans the column, like the controls under it. */
@media ( max-width: 782px ) {

	.zmeet-am .zmeet-am-toolbar > .zmeet-am-tabs {
		align-self: stretch;
	}

	.zmeet-am .zmeet-am-toolbar > .zmeet-am-tabs .zmeet-am-tab {
		flex: 1 0 auto;
		justify-content: center;
	}

	.zmeet-am .zmeet-am-toolbar > .zmeet-lx-meta {
		align-self: flex-start;
	}
}

@media ( max-width: 860px ) {

	/* All Meetings drops its first row icon on phones (Copy link is in its
	   menu). Here the icons are the only way to the action, so they stay. */
	.zmeet-am .zmeet-lx-table--cats .zmeet-am-row .zmeet-am-cell--actions .zmeet-am-btn--icon:first-of-type,
	.zmeet-am .zmeet-lx-table--logs .zmeet-am-row .zmeet-am-cell--actions .zmeet-am-btn--icon:first-of-type {
		display: inline-flex;
	}
}

/* Draft reads as All Meetings' draft flag: slate, not a status colour. */
.zmeet-am .zmeet-lx-pill.is-draft {
	background: #f1f5f9;
	color: #475569;
}

/* Not on site is the absence of a copy, so it is set as quiet text. */
.zmeet-am .zmeet-lx-pill.is-none {
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	color: var( --zmeet-am-ink-faint );
	font-weight: 500;
}

.zmeet-am .zmeet-lx-pill.is-none::before {
	display: none;
}

/*
 * Bulk actions float at the foot of the list instead of opening above it, so
 * picking a row never pushes the rows down under the pointer.
 */
.zmeet-am .zmeet-lx-stack > .zmeet-am-bulk {
	position: sticky;
	bottom: 16px;
	z-index: 40;
	box-shadow: 0 12px 32px rgba( 13, 21, 38, 0.16 );
	background: #fff;
	animation: zmeet-lx-rise 180ms ease-out both;
}

@keyframes zmeet-lx-rise {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.zmeet-am .zmeet-lx-stack > .zmeet-am-bulk {
		animation: none;
	}
}