/*
 * Deliberately quiet. This renders inside arbitrary client themes, so it
 * inherits the host font and exposes custom properties for anything a client
 * will want to restyle.
 */

:root {
	--mg-surface: #fff;
	--mg-ink: #1c1c1c;
	--mg-muted: #5c5c5c;
	--mg-accent: #1a5fb4;
	--mg-accent-ink: #fff;
	--mg-border: rgba(0, 0, 0, 0.12);
	--mg-radius: 4px;
}

/* Locked links keep their normal appearance, plus a lock affordance. */
.mg-locked {
	position: relative;
}

.mg-locked::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.8em;
	margin-inline-start: 0.35em;
	vertical-align: -0.05em;
	background-color: currentColor;
	opacity: 0.65;
	-webkit-mask: var(--mg-lock-icon) center / contain no-repeat;
	mask: var(--mg-lock-icon) center / contain no-repeat;
}

:root {
	--mg-lock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V4.5a4 4 0 0 1 8 0V7h1v9H2V7h1Zm2 0h4V4.5a2 2 0 1 0-4 0V7Z'/%3E%3C/svg%3E");
}

/* In-page notice shown where restricted content would have been. */
.mg-notice {
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius);
	padding: 1.5rem;
	background: var(--mg-surface);
	color: var(--mg-ink);
}

.mg-notice__message {
	margin: 0 0 1rem;
	color: var(--mg-muted);
	max-width: 60ch;
}

.mg-notice__cta,
.mg-modal__cta {
	display: inline-block;
	padding: 0.6em 1.2em;
	border-radius: var(--mg-radius);
	background: var(--mg-accent);
	color: var(--mg-accent-ink);
	text-decoration: none;
	font-weight: 600;
}

.mg-notice__cta:hover,
.mg-modal__cta:hover {
	filter: brightness(0.92);
	color: var(--mg-accent-ink);
}

/* Modal */
.mg-modal[hidden] {
	display: none;
}

.mg-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.mg-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.mg-modal__panel {
	position: relative;
	width: min(28rem, 100%);
	background: var(--mg-surface);
	color: var(--mg-ink);
	border-radius: calc(var(--mg-radius) * 2);
	padding: 2rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.mg-modal__message {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.5;
}

.mg-modal__close {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: none;
	color: var(--mg-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.mg-modal__cta[hidden] {
	display: none;
}

body.mg-modal-open {
	overflow: hidden;
}

.mg-modal :focus-visible,
.mg-locked:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.mg-modal__panel {
		animation: mg-panel-in 160ms ease-out;
	}

	@keyframes mg-panel-in {
		from {
			opacity: 0;
			transform: translateY(6px);
		}
	}
}