/**
 * The generator application shell.
 *
 * Desktop: settings on the left, the real page on the right, both scrolling
 * independently with the preview sticky so it stays in view while you work
 * through the options.
 *
 * Mobile: two views of one screen, switched by a segmented control, with the
 * export actions pinned to the bottom where a thumb can reach them. Deliberately
 * not the desktop layout stacked - the preview needs the full width to be
 * readable at all.
 *
 * @package ActivityMaker
 */

.am-generator {
	--am-editor-width: 24rem;
	/* Room for the action bar that is pinned to the bottom of a phone screen,
	   plus the home indicator on a phone that has one. */
	padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 1000px) {
	.am-generator {
		padding-bottom: var(--am-5);
	}
}

.am-generator__viewtabs {
	position: sticky;
	top: var(--am-header-height);
	z-index: 20;
	display: flex;
	gap: 2px;
	padding: var(--am-2) 0;
	background: var(--am-bg);
}

@media (min-width: 1000px) {
	.am-generator__viewtabs {
		display: none;
	}
}

/* Same reasoning as the header: on a landscape phone the sticky tabs and the
   sticky header together leave almost nothing for the sheet being previewed. */
@media (max-height: 560px) and (orientation: landscape) {
	.am-generator__viewtabs {
		position: static;
	}
}

.am-generator__viewtabs .am-segment {
	width: 100%;
}

.am-generator__viewtabs .am-segment__item {
	flex: 1;
	min-height: 38px;
}

.am-generator__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--am-5);
	align-items: start;
}

@media (min-width: 1000px) {
	.am-generator__grid {
		grid-template-columns: var(--am-editor-width) minmax(0, 1fr);
		gap: var(--am-6);
	}
}

@media (min-width: 1280px) {
	.am-generator {
		--am-editor-width: 26rem;
	}
}

/* View switching on small screens. */
@media (max-width: 999px) {
	.am-generator[data-view="preview"] .am-generator__editor {
		display: none;
	}

	.am-generator[data-view="edit"] .am-generator__preview {
		display: none;
	}
}

.am-generator__editor {
	min-width: 0;
}

.am-generator__preview {
	min-width: 0;
}

@media (min-width: 1000px) {
	.am-generator__preview {
		position: sticky;
		top: calc(var(--am-header-height) + var(--am-4));
	}
}

/* --------------------------------------------------------------- Editor. */

.am-group + .am-group {
	margin-top: var(--am-5);
	padding-top: var(--am-5);
	border-top: 1px solid var(--am-border);
}

.am-group__title {
	font-size: var(--am-text-sm);
	font-weight: 680;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--am-text-faint);
	margin-bottom: var(--am-3);
}

.am-group__fields > .am-field:last-child {
	margin-bottom: 0;
}

.am-disclosure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: var(--am-4);
	padding: var(--am-3);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius);
	background: var(--am-bg-sunken);
	color: var(--am-text);
	font-family: inherit;
	font-size: var(--am-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.am-disclosure:hover {
	border-color: var(--am-border-strong);
}

.am-disclosure[aria-expanded="true"] .am-disclosure__icon svg {
	transform: rotate(180deg);
}

.am-disclosure__icon {
	display: inline-flex;
	color: var(--am-text-faint);
}

.am-advanced {
	margin-top: var(--am-4);
	padding: var(--am-4);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius);
	background: var(--am-bg-sunken);
}

.am-advanced .am-group + .am-group {
	border-top-color: var(--am-border-strong);
}

.am-content-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-2);
	margin-top: var(--am-3);
	padding-top: var(--am-3);
	border-top: 1px solid var(--am-border);
}

.am-count {
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Preview. */

.am-preview {
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
	overflow: hidden;
}

.am-preview__toolbar {
	display: flex;
	align-items: center;
	gap: var(--am-2);
	padding: var(--am-2) var(--am-3);
	border-bottom: 1px solid var(--am-border);
	background: var(--am-bg-sunken);
	flex-wrap: wrap;
}

.am-preview__status {
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
	font-variant-numeric: tabular-nums;
}

.am-pager {
	display: flex;
	align-items: center;
	gap: var(--am-2);
}

.am-pager__label {
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
	min-width: 6.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.am-preview__stage {
	padding: var(--am-4);
	background:
		linear-gradient(45deg, #eceef1 25%, transparent 25%) -8px 0/16px 16px,
		linear-gradient(-45deg, #eceef1 25%, transparent 25%) -8px 0/16px 16px,
		linear-gradient(45deg, transparent 75%, #eceef1 75%) 0 0/16px 16px,
		linear-gradient(-45deg, transparent 75%, #eceef1 75%) 0 0/16px 16px,
		#f4f5f7;
	display: flex;
	justify-content: center;
}

.am-preview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-2);
	align-items: center;
	padding: var(--am-3);
	border-top: 1px solid var(--am-border);
}

.am-preview__messages {
	padding: 0 var(--am-3) var(--am-3);
}

.am-preview__messages:empty {
	padding: 0;
}

/* Sticky action bar on phones. */
@media (max-width: 999px) {
	.am-preview__actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		background: var(--am-bg);
		border-top: 1px solid var(--am-border);
		box-shadow: 0 -2px 14px rgba(16, 20, 26, 0.08);
		padding: var(--am-3) max(var(--am-4), env(safe-area-inset-left));
		/* Clear of the home indicator, so the last button is not half under it. */
		padding-bottom: max(var(--am-3), env(safe-area-inset-bottom));
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.am-preview__actions .am-btn {
		flex: none;
	}

	.am-generator[data-view="edit"] .am-preview__actions {
		display: none;
	}
}

.am-draftbar {
	margin-bottom: var(--am-4);
}

/* --------------------------------------------------------------- Activity pack. */

.am-pack__picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-2);
	margin-bottom: var(--am-4);
}

.am-pack__chosen {
	list-style: none;
	margin: 0 0 var(--am-4);
	padding: 0;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius);
	overflow: hidden;
}

.am-pack__row {
	display: flex;
	align-items: center;
	gap: var(--am-3);
	margin: 0;
	padding: var(--am-2) var(--am-3);
	border-bottom: 1px solid var(--am-border);
	background: var(--am-bg-raised);
}

.am-pack__row:last-child {
	border-bottom: 0;
}

.am-pack__rowTitle {
	flex: 1;
	font-size: var(--am-text-sm);
	font-weight: 600;
}

.am-pack__rowActions {
	display: flex;
	gap: var(--am-1);
}

.am-pack__rowActions .am-iconbtn {
	width: 28px;
	height: 28px;
}

.am-pack__emptyRow {
	margin: 0;
	padding: var(--am-4);
	text-align: center;
	color: var(--am-text-faint);
	font-size: var(--am-text-sm);
}

/* --------------------------------------------------------------- Account forms. */

.am-account {
	max-width: 25rem;
	margin: var(--am-7) auto;
	padding: var(--am-5);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
	box-shadow: var(--am-shadow-1);
}

.am-account__title {
	font-size: var(--am-text-xl);
	margin-bottom: var(--am-1);
}

.am-account__lead {
	color: var(--am-text-muted);
	font-size: var(--am-text-sm);
	margin-bottom: var(--am-5);
}

.am-account__foot {
	margin-top: var(--am-4);
	padding-top: var(--am-4);
	border-top: 1px solid var(--am-border);
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
	text-align: center;
}

.am-account__inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-3);
	flex-wrap: wrap;
	margin-bottom: var(--am-4);
}

/* --------------------------------------------------------------- Auth panels. */

.am-account-page {
	padding-block: var(--am-5) var(--am-7);
}

.am-auth {
	max-width: 27rem;
	margin-inline: auto;
}

.am-auth__panel {
	padding: var(--am-5);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
	box-shadow: var(--am-shadow-1);
}

.am-auth__title {
	font-size: var(--am-text-lg);
	margin-bottom: var(--am-4);
}

.am-auth__error {
	padding: var(--am-3);
	margin-bottom: var(--am-4);
	border: 1px solid #e8c1bf;
	border-radius: var(--am-radius);
	background: var(--am-danger-soft);
	color: #5c1a19;
	font-size: var(--am-text-sm);
	line-height: 1.5;
}

.am-auth__error p {
	margin: 0;
}

.am-auth__error p + form,
.am-auth__error p + p {
	margin-top: var(--am-2);
}

/* The switch between the two halves. Deliberately prominent: it is the whole
   point of putting them on one page. */
.am-auth__switch {
	margin: var(--am-4) 0 0;
	padding-top: var(--am-4);
	border-top: 1px solid var(--am-border);
	text-align: center;
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

.am-auth__switch a {
	font-weight: 600;
}

.am-auth__reset {
	margin-top: var(--am-4);
	font-size: var(--am-text-sm);
}

.am-auth__reset summary {
	cursor: pointer;
	color: var(--am-text-muted);
	padding: var(--am-1) 0;
}

.am-auth__reset summary:hover {
	color: var(--am-accent);
}

.am-auth__reset[open] summary {
	margin-bottom: var(--am-3);
	color: var(--am-text);
}

/* A button that reads as a link - used where the action is a switch, not
   navigation, so it must not be an anchor. */
.am-linkbtn {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--am-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.am-linkbtn:hover {
	color: var(--am-accent-hover);
}

/* Signed-in summary. */
.am-account__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	gap: var(--am-3);
	max-width: 30rem;
}

.am-account__stat {
	padding: var(--am-4);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	background: var(--am-bg-raised);
}

.am-account__statValue {
	display: block;
	font-size: var(--am-text-2xl);
	font-weight: 650;
	line-height: 1.1;
}

.am-account__statLabel {
	display: block;
	margin-top: 2px;
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

.am-account__resend {
	margin-top: var(--am-3);
}

.am-help.is-short {
	color: var(--am-warning);
}

.am-help.is-ok {
	color: var(--am-success);
}

/* The honeypot: off-screen for people, present for the bots that fill it in. */
.am-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------- Contact form. */

.am-contact {
	max-width: 34rem;
}

.am-contact__meta {
	margin-top: var(--am-5);
	padding-top: var(--am-4);
	border-top: 1px solid var(--am-border);
	font-size: var(--am-text-sm);
	color: var(--am-text-muted);
}

/* --------------------------------------------------------------- Dashboard. */

.am-dashboard__bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-2);
	align-items: center;
	margin-bottom: var(--am-4);
}

.am-dashboard__bar .am-input {
	width: auto;
	min-width: 12rem;
	flex: 1 1 12rem;
}

.am-dashboard[aria-busy="true"] .am-rows {
	opacity: 0.55;
}

.am-dashboard__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-3);
	margin-top: var(--am-4);
}