/*
 * Typingo: Share cards, challenge links, Job-Ready results and the certificate.
 */

/* ---------- Share cards, challenge links ---------- */
.ty-share {
	display: grid;
	gap: 0.9rem;
}

.ty-share__title {
	margin: 0;
	font-size: 1.15rem;
}

.ty-share__lead {
	margin: 0;
	color: var(--ty-muted);
}

.ty-share__body {
	display: grid;
	gap: 1.25rem;
	align-items: start;
}

@media (min-width: 760px) {
	.ty-share__body {
		grid-template-columns: minmax(180px, 280px) 1fr;
	}
}

.ty-share__frame {
	display: grid;
	place-items: center;
	padding: 0.75rem;
	border-radius: 16px;
	background: var(--ty-surface-2);
}

.ty-share__preview {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	box-shadow: var(--ty-shadow);
	object-fit: contain;
	background: var(--ty-surface);
}

.ty-share__preview.is-square {
	aspect-ratio: 1;
}

.ty-share__side,
.ty-share__controls {
	display: grid;
	gap: 0.9rem;
	align-content: start;
}

.ty-share__field {
	display: grid;
	gap: 0.3rem;
}

.ty-share__label {
	font-size: 0.9rem;
	font-weight: 500;
}

.ty-share__input {
	max-width: 28rem;
}

.ty-share__link {
	max-width: none;
	font-family: var(--ty-font-mono);
	font-size: 0.9rem;
}

.ty-share__status {
	min-height: 1.5em;
	margin: 0;
	color: var(--ty-good);
	font-size: 0.9rem;
}

.ty-challenge-panel {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid color-mix(in srgb, var(--ty-primary) 25%, var(--ty-line));
	border-radius: 16px;
	background: color-mix(in srgb, var(--ty-primary) 5%, var(--ty-surface));
}

/* Challenge page. */
.ty-challenge__title {
	margin-bottom: 0.25rem;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.ty-challenge__who {
	color: var(--ty-link);
}

.ty-challenge__lead {
	margin: 0;
	color: var(--ty-muted);
}

.ty-versus {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.ty-versus__side {
	padding: 1rem;
	border-radius: 14px;
	background: var(--ty-surface-2);
	text-align: center;
}

.ty-versus__side.is-ahead {
	background: color-mix(in srgb, var(--ty-accent) 14%, var(--ty-surface));
}

.ty-versus__side p {
	margin: 0;
}

.ty-versus__name {
	overflow: hidden;
	color: var(--ty-muted);
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ty-versus__wpm {
	font-family: var(--ty-font-mono);
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 600;
}

.ty-versus__extra {
	color: var(--ty-muted);
	font-size: 0.88rem;
}

.ty-versus__vs {
	margin: 0;
	color: var(--ty-muted);
	font-weight: 600;
	text-transform: uppercase;
}

/* Job-Ready. */
.ty-exam__rules {
	margin: 0 0 1.25rem;
	padding-left: 1.2rem;
}

.ty-exam__rules li + li {
	margin-top: 0.3rem;
}

.ty-exam__report {
	display: grid;
	gap: 0.9rem;
	margin: 0 0 1.25rem;
}

.ty-exam__verdict {
	margin: 0;
	font-weight: 500;
}

.ty-exam__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 0.6rem;
	margin: 0;
}

.ty-exam__facts div {
	padding: 0.75rem 1rem;
	border: 1px solid var(--ty-line);
	border-radius: 12px;
}

.ty-exam__facts dt {
	color: var(--ty-muted);
	font-size: 0.85rem;
}

.ty-exam__facts dd {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.ty-exam__next,
.ty-exam__disclaimer {
	margin: 0;
}

.ty-exam__disclaimer {
	color: var(--ty-muted);
	font-size: 0.88rem;
}

.ty-preset__action {
	margin: 1rem 0 0;
}

/* Certificate. */
.ty-cert {
	display: grid;
	gap: 1rem;
}

.ty-cert__title {
	margin: 0;
}

.ty-cert__lead,
.ty-cert__note {
	margin: 0;
	color: var(--ty-muted);
}

.ty-cert__note {
	font-size: 0.88rem;
}

.ty-cert__frame {
	padding: clamp(0.5rem, 2vw, 1rem);
	border-radius: 16px;
	background: var(--ty-surface-2);
}

.ty-cert__image {
	display: block;
	width: 100%;
	aspect-ratio: 2000 / 1414;
	border-radius: 8px;
	box-shadow: var(--ty-shadow);
	background: #fffdf8;
}

.ty-cert__code {
	margin: 0;
	font-family: var(--ty-font-mono);
}

.ty-cert-check {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ty-line);
	border-radius: 16px;
	background: var(--ty-surface);
}

.ty-cert-check summary {
	font-weight: 600;
	cursor: pointer;
}

.ty-cert-check__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 0.75rem;
	margin: 0.75rem 0 1rem;
}

.ty-cert-check__result:empty {
	display: none;
}

.ty-cert-check__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.ty-cert-check__lead {
	margin: 0 0 0.5rem;
	color: var(--ty-muted);
}

.ty-cert__id {
	margin: 0;
	font-weight: 600;
}

.ty-cert__id a {
	font-family: var(--ty-font-mono);
	letter-spacing: 0.04em;
}

.ty-cert__status:empty {
	display: none;
}

.ty-cert__status {
	margin: 0;
	color: var(--ty-muted);
}

.ty-cert__more {
	margin: 0.5rem 0 0;
}

.ty-cert__more summary {
	color: var(--ty-link);
	cursor: pointer;
}

.ty-cert__rename {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem;
	margin: 0.75rem 0 0.5rem;
}

.ty-cert__rename .ty-share__field {
	flex: 1 1 16rem;
}

.ty-cert__view {
	display: grid;
	gap: 1rem;
}

@media print {
	.ty-view-certificate .site-main > .ty-container > :not(.typingo-app),
	.ty-view-certificate .ty-cert > :not(.ty-cert__frame):not(.ty-cert__view),
	.ty-view-certificate .ty-cert__view > :not(.ty-cert__frame),
	.ty-view-certificate .ty-cert-check {
		display: none !important;
	}

	.ty-view-certificate .typingo-app,
	.ty-view-certificate .ty-cert__frame {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.ty-view-certificate .ty-cert__image {
		box-shadow: none;
	}

	@page {
		size: A4 landscape;
		margin: 10mm;
	}
}