/*
 * Creator application: tablet and phone layout. Loaded after application.css.
 *
 * Below 960px the summary card becomes a slim sticky bar above the form, so it
 * keeps filling in as the applicant types without pushing the form off screen.
 * Tapping the bar opens the full card.
 */

@media (max-width: 960px) {
	html:has(.apply-page) { scroll-padding-top: 96px; }
	/* A field brought into view after a failed check stops below the bar, which can wrap to two rows */
	.apply-page :is(.field, .channel, .tick) { scroll-margin-top: 28px; }
	/* minmax(0, 1fr) lets the column shrink below long unbroken text instead of widening the page */
	.apply-page .ap-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.apply-page .ap-preview {
		position: sticky;
		top: 8px;
		z-index: 20;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
	.apply-page .ap-preview:has(.is-sent) { position: static; max-width: 380px; }

	/* Opened from the bar: the full card drops down over the form, with a dimmed backdrop */
	.apply-page .nametag.is-expanded:not(.is-sent) {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: min(380px, 100%);
		max-height: calc(100dvh - 24px);
		margin: 0 auto;
		overflow-y: auto;
		animation: ap-drop .25s cubic-bezier(.2, 1.3, .4, 1) both;
	}
	.apply-page .ap-preview:has(.nametag.is-expanded:not(.is-sent))::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 1;
		background: #22374466;
		cursor: pointer;
	}
	@keyframes ap-drop {
		from { opacity: 0; transform: translateY(-12px) scale(.97); }
		to { opacity: 1; transform: none; }
	}

	/* Collapsed bar */
	.apply-page .nametag:not(.is-expanded) {
		display: grid;
		grid-template-columns: 52px 1fr;
		align-items: center;
		gap: 12px;
		padding: 7px 48px 7px 7px;
		border-radius: 18px;
		box-shadow: 0 0 0 3px var(--card-line), 0 6px 0 3px #2889a82b, 0 10px 24px #22374426;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-sky {
		height: 52px;
		border: 0;
		border-radius: 12px;
		background-position: 32% 30%;
		background-size: auto 150%;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-ribbon,
	.apply-page .nametag:not(.is-expanded) .nametag-user,
	.apply-page .nametag:not(.is-expanded) .nametag-tags,
	.apply-page .nametag:not(.is-expanded) .nametag-stamp,
	.apply-page .nametag:not(.is-expanded) .nametag-platforms small,
	.apply-page .nametag:not(.is-expanded) .nametag-platforms .is-placeholder { display: none; }
	.apply-page .nametag:not(.is-expanded) .nametag-body {
		min-width: 0;
		padding: 0;
		text-align: left;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-name {
		font-size: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-handle {
		margin: 0;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-platforms {
		justify-content: flex-start;
		gap: 4px;
		margin: 4px 0 0;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-platforms li {
		padding: 0;
		border: 0;
		background: none;
		font-size: 0;
	}
	.apply-page .nametag:not(.is-expanded) .nametag-platforms .platform-mark {
		width: 20px;
		height: 20px;
		border-radius: 6px;
	}

	/* Open / close toggle */
	.apply-page .nametag-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 50%;
		right: 8px;
		z-index: 2;
		width: 34px;
		height: 34px;
		transform: translateY(-50%);
		border: 2px solid #cfe1e7;
		border-radius: 50%;
		background: #fff;
		cursor: pointer;
	}
	.apply-page .nametag-toggle::before {
		content: '';
		width: 8px;
		height: 8px;
		border: solid #1594b7;
		border-width: 0 2.5px 2.5px 0;
		transform: translateY(-2px) rotate(45deg);
	}
	.apply-page .nametag.is-expanded .nametag-toggle {
		top: 10px;
		transform: none;
	}
	.apply-page .nametag.is-expanded .nametag-toggle::before { transform: translateY(2px) rotate(-135deg); }
	.apply-page .nametag.is-sent .nametag-toggle { display: none; }
}

@media (max-width: 640px) {
	.apply-page .ap-hero { padding-bottom: 92px; }
	.apply-page .ap-layout { margin-top: -70px; }
	.apply-page .ap-card { padding: 22px 18px 24px; }
	.apply-page .field-row { grid-template-columns: 1fr; }

	/* Expanded card */
	.apply-page .nametag.is-expanded .nametag-sky { height: 96px; }
	.apply-page .nametag.is-expanded .nametag-body { padding: 24px 14px 16px; }
	.apply-page .nametag.is-expanded .nametag-name { font-size: 28px; }

	/* Platform tiles */
	.apply-page .platforms { gap: 10px 8px; }
	.apply-page .platform { padding: 10px 2px 8px; gap: 5px; }
	.apply-page .platform .platform-mark { width: 30px; height: 30px; border-radius: 9px; }
	.apply-page .platform-name { font-size: 11px; }

	/* Channel rows: icon, name and "Main" on top; link and audience full width below */
	.apply-page .channel {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: 'mark name main' 'fields fields fields';
		gap: 10px;
	}
	.apply-page .channel > .platform-mark { grid-area: mark; width: 30px; height: 30px; border-radius: 9px; }
	.apply-page .channel-name { display: block; grid-area: name; font-weight: 900; }
	.apply-page .channel-fields { grid-area: fields; grid-template-columns: 1fr; }
	.apply-page .channel-main { grid-area: main; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }

	/* Stepper shows only the current step's label */
	.apply-page .stepper li { font-size: 0; }
	.apply-page .stepper li.is-current { font-size: 12px; white-space: nowrap; }

	.apply-page .ap-step legend { font-size: 28px; }
	.apply-page .prefix-input span { padding-left: 10px; font-size: 13px; }
	.apply-page .review > div { grid-template-columns: 1fr auto; }
	.apply-page .review dd:first-of-type { grid-column: 1 / -1; grid-row: 2; }
	.apply-page .ap-nav { flex-wrap: wrap; }
	.apply-page .ap-saved { order: 3; flex-basis: 100%; }
	.apply-page .ap-next { flex: 1; padding: 16px 14px; font-size: 15px; }

	/* Handle hint fits on one line */
	.apply-page .handle-hint .hint-preview { display: none; }
	.apply-page .handle-hint { font-size: 12px; gap: 4px 8px; flex-wrap: nowrap; white-space: nowrap; }
	.apply-page .hint-fix .fix-long { display: none; }
	.apply-page .hint-fix .fix-short { display: inline; }
}