/* EG Mail: the preferences page ("Your emails") and the "Your emails" card in the account. Uses the
   EnglishGrammar Textbook theme's tokens when they are there, with the same values as fallbacks, and
   looks like EG Account's cards. */

.egm {
	--egm-ink: var(--eg-ink, #1f2c1e);
	--egm-text: var(--eg-text, #313b2f);
	--egm-muted: var(--eg-muted, #6a7267);
	--egm-moss: var(--eg-moss, #446931);
	--egm-moss-dark: var(--eg-moss-dark, #355d20);
	--egm-moss-soft: var(--eg-moss-soft, #edf3e7);
	--egm-rule: var(--eg-rule, #e7e4da);
	--egm-rule-strong: var(--eg-rule-strong, #cfcbbf);
	--egm-border: var(--eg-panel-border, #e3e6dc);
	--egm-page: var(--eg-page, #ffffff);
	--egm-radius: var(--eg-radius, 6px);
	--egm-radius-large: var(--eg-radius-large, 12px);
	--egm-danger: #b42318;
	color: var(--egm-ink);
	font-family: var(--eg-sans, inherit);
	/* A long address breaks rather than pushing the card wider than a phone's screen. */
	overflow-wrap: anywhere;
}

/* The page: one centered column. Inside the account the card around it is EG Account's. */
.egm:not(.egm--card) {
	width: 100%;
	max-width: 680px;
	margin-inline: auto;
}

.egm-card {
	padding: 24px;
	border: 1px solid var(--egm-border);
	border-radius: var(--egm-radius-large);
	background: var(--egm-page);
}

@media (min-width: 700px) {
	.egm-card {
		padding: 32px 36px;
	}
}

@media (max-width: 600px) {
	.egm-card {
		padding: 18px 16px;
	}
}

.egm h2 {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.25;
}

.egm .egm-card p,
.egm .egm-card label {
	font-size: 16px;
	line-height: 1.55;
}

.egm .egm-for {
	margin: 0 0 18px;
	color: var(--egm-muted);
	font-size: 15px;
}

.egm .egm-for strong {
	color: var(--egm-ink);
	font-weight: 650;
}

/* Notices */

.egm-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--egm-border);
	border-radius: var(--egm-radius);
	background: var(--egm-moss-soft);
	color: var(--egm-ink);
}

.egm-notice p,
.egm .egm-card .egm-notice p {
	margin: 0;
	font-size: 15px;
}

.egm-notice--error {
	border-color: rgba(180, 35, 24, 0.3);
	background: rgba(180, 35, 24, 0.06);
}

.egm-notice--info {
	background: #fbf8ef;
}

/* The choices */

.egm-form {
	margin: 0;
}

.egm fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.egm .egm-topics__legend {
	margin: 0 0 10px;
	padding: 0;
	font-size: 14.5px;
	font-weight: 650;
}

.egm .egm-topics {
	margin: 0 0 18px;
}

.egm-topics__list {
	display: grid;
	gap: 10px;
}

.egm-topic {
	border: 1px solid var(--egm-rule-strong);
	border-radius: var(--egm-radius);
	background: #fff;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.egm-topic:hover {
	border-color: var(--egm-moss);
}

.egm-topic:has(> .egm-topic__main input:checked) {
	border-color: var(--egm-moss);
	background: var(--egm-moss-soft);
}

.egm .egm-topic__main {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 12px 14px;
	cursor: pointer;
}

.egm .egm-topic__main input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--egm-moss);
}

.egm-topic__text {
	display: grid;
	gap: 2px;
	line-height: 1.35;
}

.egm-topic__label {
	font-size: 15.5px;
	font-weight: 650;
}

.egm-topic__description {
	color: var(--egm-muted);
	font-size: 14px;
}

/* The levels: under the weekly exercises, only while that email is ticked. */

.egm .egm-levels {
	padding: 0 14px 14px 42px;
}

.egm-topic:not(:has(> .egm-topic__main input:checked)) .egm-levels {
	display: none;
}

.egm .egm-levels__legend {
	margin: 0 0 8px;
	padding: 0;
	color: var(--egm-muted);
	font-size: 13.5px;
	font-weight: 650;
}

.egm-levels__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	clear: both;
}

.egm .egm-level {
	--egm-level-bg: var(--eg-level-a-bg, #e8f0df);
	--egm-level-ink: var(--eg-level-a-ink, #355a24);
	--egm-level-line: var(--eg-level-a-line, #c3d6ad);
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.egm .egm-level--b {
	--egm-level-bg: var(--eg-level-b-bg, #e5edf8);
	--egm-level-ink: var(--eg-level-b-ink, #244f8c);
	--egm-level-line: var(--eg-level-b-line, #bbcfe9);
}

.egm .egm-level--c {
	--egm-level-bg: var(--eg-level-c-bg, #f3e8f3);
	--egm-level-ink: var(--eg-level-c-ink, #662a69);
	--egm-level-line: var(--eg-level-c-line, #d9c2da);
}

/* The box itself is invisible over the chip: the chip is what people see and click. */
.egm .egm-level input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.egm-level span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 48px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--egm-rule-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--egm-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.egm-level input:checked + span {
	border-color: var(--egm-level-line);
	background: var(--egm-level-bg);
	color: var(--egm-level-ink);
}

/* A tick too, so the choice doesn't rest on color alone. */
.egm-level input:checked + span::before {
	content: "";
	width: 10px;
	height: 6px;
	margin-top: -3px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
}

.egm-level:hover span {
	border-color: var(--egm-level-line);
}

.egm-level input:focus-visible + span {
	outline: 2px solid var(--egm-moss);
	outline-offset: 2px;
}

.egm .egm-levels__error {
	margin: 8px 0 0;
	color: var(--egm-danger);
	font-size: 14px;
}

.egm-levels__error[hidden] {
	display: none;
}

/* Buttons */

.egm .egm-actions {
	margin: 0 0 12px;
}

.egm .egm-button,
.egm button.egm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	height: auto;
	padding: 10px 20px;
	border: 1px solid var(--egm-moss);
	border-radius: var(--egm-radius);
	background: var(--egm-moss);
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.egm .egm-button:hover,
.egm .egm-button:focus-visible {
	border-color: var(--egm-moss-dark);
	background: var(--egm-moss-dark);
	color: #fff;
}

.egm .egm-button:focus-visible {
	outline: 2px solid var(--egm-moss);
	outline-offset: 2px;
}

.egm .egm-button.egm-button--secondary {
	background: #fff;
	color: var(--egm-moss-dark);
}

.egm .egm-button.egm-button--secondary:hover,
.egm .egm-button.egm-button--secondary:focus-visible {
	background: var(--egm-moss-soft);
	color: var(--egm-moss-dark);
}

/* "Unsubscribe from all": a quiet text button. */
.egm .egm-textbutton,
.egm button.egm-textbutton {
	display: inline;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--egm-muted);
	font: inherit;
	font-size: 14.5px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.egm .egm-textbutton:hover,
.egm .egm-textbutton:focus-visible {
	background: none;
	color: var(--egm-danger);
}

.egm .egm-all {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--egm-rule);
}

.egm .egm-fine {
	margin: 0;
	color: var(--egm-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.egm .egm-switch {
	margin: 14px 0 0;
	font-size: 15px;
}

.egm a:not(.egm-button) {
	color: var(--egm-moss-dark);
}

/* The unsubscribe step: the second button sits under the first. */
.egm-card--narrow .egm-all {
	margin-top: 4px;
	padding-top: 0;
	border-top: 0;
}