/*
 * Overdrive Newsletter 1.1.0 — página /preferencias-newsletter/.
 * Mesmas peças do site: título na fonte de títulos (Barlow Condensed), texto em
 * Source Sans 3, blocos em --surface com cantos de 4px, título de seção do tema
 * e as linhas da página Jogos de hoje. Sem rótulos em caixa-alta, pílulas,
 * cards com ícone, sombras ou gradientes. Cores pelos tokens do tema (escuro
 * por padrão, claro em html[data-theme="light-mode"]).
 */

.odn {
	--odn-ink: var(--text, #faf8f6);
	--odn-soft: var(--text-secondary, #b8b0c4);
	--odn-card: var(--surface, #24212b);
	--odn-edge: var(--border-strong, rgba(255, 255, 255, 0.22));
	--odn-accent: var(--go-action-accent, #c6a3ff);
	--odn-focus: var(--focus, #c6a3ff);
	--odn-sans: var(--od471-body, var(--font-sans, "Source Sans 3", Arial, sans-serif));
	--odn-display: var(--od471-heading, var(--font-display, "Barlow Condensed", "Arial Narrow", sans-serif));
	color: var(--odn-ink);
	font-family: var(--odn-sans);
}

.odn *,
.odn *::before,
.odn *::after {
	box-sizing: border-box;
}

.odn a:focus-visible,
.odn input:focus-visible,
.odn button:focus-visible {
	outline: 2px solid var(--odn-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ cabeçalho */

.odn__head {
	padding-top: clamp(16px, 2.6vw, 28px);
}

.odn__title {
	max-width: 18ch;
	margin: 14px 0 0;
	color: var(--odn-ink);
	font: 690 clamp(2.5rem, 5.2vw, 4rem) / 1 var(--odn-display);
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.odn__lead {
	max-width: 62ch;
	margin: 16px 0 0;
	color: var(--odn-soft);
	font: 400 1.125rem / 1.55 var(--odn-sans);
}

/* ------------------------------------------------------------ corpo */

.odn__body {
	display: grid;
	gap: clamp(28px, 4vw, 40px);
	align-items: start;
	padding-block: clamp(20px, 3vw, 32px) clamp(40px, 6vw, 72px);
}

@media (min-width: 1024px) {
	.odn__body {
		grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
		column-gap: clamp(40px, 5vw, 72px);
	}
}

.odn__main {
	display: grid;
	gap: 20px;
	min-width: 0;
}

.odn__panel {
	padding: clamp(18px, 3vw, 28px);
	border-radius: 4px;
	background: var(--odn-card);
}

/* ------------------------------------------------------------ formulário */

.odn-form {
	margin: 0;
}

.odn-form__label,
.odn-topics__title {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--odn-ink);
	font: 700 17px / 1.3 var(--odn-sans);
}

.odn-form__line {
	display: flex;
	gap: 10px;
}

.odn .odn-form__input,
.odn .tnp-profile input[type="text"],
.odn .tnp-profile input[type="email"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 50px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--odn-edge);
	border-radius: 4px;
	background: transparent;
	color: var(--odn-ink);
	font: 400 17px / 1.3 var(--odn-sans);
	box-shadow: none;
	appearance: none;
}

.odn .odn-form__input::placeholder {
	color: var(--odn-soft);
	opacity: 1;
}

.odn .odn-form__input:focus,
.odn .tnp-profile input[type="text"]:focus,
.odn .tnp-profile input[type="email"]:focus {
	border-color: var(--odn-accent);
	outline: 2px solid var(--odn-focus);
	outline-offset: 0;
}

/* Botão principal do site (go-btn--mint: #7900ff e #6200ce no hover, nos dois
 * temas), com os mesmos cantos de 4px dos blocos. Vale também para os botões do
 * plugin Newsletter (Salvar, Cancelar inscrição). */
.odn .odn-form__submit,
.odn .tnp-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 50px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 1px solid #7900ff !important;
	border-radius: 4px !important;
	background: #7900ff !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font: 700 17px / 1 var(--odn-sans) !important;
	cursor: pointer;
}

.odn .odn-form__submit:hover,
.odn .odn-form__submit:focus-visible,
.odn .tnp-submit:hover,
.odn .tnp-submit:focus-visible {
	border-color: #6200ce !important;
	background: #6200ce !important;
}

.odn-form__legal {
	max-width: 60ch;
	margin: 16px 0 0;
	color: var(--odn-soft);
	font: 400 15px / 1.5 var(--odn-sans);
}

.odn-form__legal a,
.odn-message a,
.odn__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Assuntos: lista simples de caixas, duas colunas onde cabe. */
.odn-topics {
	min-width: 0;
	margin: 26px 0 0;
	padding: 0;
	border: 0;
}

.odn-topics__hint {
	margin: -2px 0 6px;
	color: var(--odn-soft);
	font: 400 15px / 1.45 var(--odn-sans);
}

.odn-topics__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.odn-check,
.odn .tnp-field-list label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	color: var(--odn-ink);
	font: 400 17px / 1.35 var(--odn-sans);
	cursor: pointer;
}

.odn-check input,
.odn .tnp-field-list input {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	margin: 1px 0 0;
	accent-color: var(--odn-accent);
	cursor: pointer;
}

.odn-check--consent {
	margin-top: 12px;
	font-size: 15px;
}

/* ------------------------------------------------------------ outros estados */

.odn-message {
	font: 400 18px / 1.55 var(--odn-sans);
}

.odn-message > :first-child,
.odn-message p:first-child {
	margin-top: 0;
}

.odn-message p {
	margin: 0 0 12px;
}

.odn-message h2 {
	margin: 0 0 10px;
	font: 700 22px / 1.25 var(--odn-sans);
}

.odn-message__aside {
	margin: 14px 0 0;
	color: var(--odn-soft);
	font: 400 15px / 1.5 var(--odn-sans);
}

.odn-message__status {
	margin: 0 0 14px;
	color: var(--odn-ink);
	font: 700 17px / 1.4 var(--odn-sans);
}

/* Formulário de preferências do plugin Newsletter no mesmo desenho. */
.odn .tnp-profile,
.odn .tnp-profile form {
	max-width: none;
	margin: 0;
}

.odn .tnp-profile .tnp-field {
	margin: 0 0 16px;
}

.odn .tnp-profile .tnp-field:not(.tnp-field-list) > label {
	display: block;
	margin: 0 0 8px;
	color: var(--odn-ink);
	font: 700 17px / 1.3 var(--odn-sans);
}

/* Caixas de assunto do plugin: mesmo desenho das da inscrição. */
.odn .tnp-profile .tnp-field-list > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	color: var(--odn-ink);
	font: 400 17px / 1.35 var(--odn-sans);
	cursor: pointer;
}

.odn .tnp-profile .tnp-field-list input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	max-width: none; /* o CSS do plugin limita a 1em */
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--odn-accent);
}

.odn .tnp-profile .tnp-field-privacy {
	margin: 0 0 16px;
	font: 400 15px / 1.5 var(--odn-sans);
}

.odn .tnp-profile .tnp-field-privacy a {
	color: var(--odn-soft);
}

.odn .tnp-profile .tnp-lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	margin: 0 0 16px;
}

.odn .tnp-profile .tnp-lists .tnp-field {
	margin: 0;
}

.odn .tnp-button-form {
	margin: 18px 0 0;
}

/* ------------------------------------------------------------ edição de hoje */

/* Fallback do título de seção do site (as regras do tema prevalecem onde existem). */
.odn .go-section__title {
	margin: 0;
	color: var(--odn-ink);
	font: 750 clamp(22px, 2vw, 28px) / 1.12 var(--odn-sans);
	letter-spacing: -0.03em;
}

.odn__today .go-section__head {
	margin: 0 0 12px;
}

.odn-today {
	margin: 0;
	padding: 6px 18px 8px;
	border-radius: 4px;
	background: var(--odn-card);
	list-style: none;
}

.odn-today__row {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	align-items: baseline;
	gap: 2px 14px;
	margin: 0;
	padding: 10px 0;
}

/* Sem o tema (fallback): número, título, editoria e hora. Com o tema vale o bloco "Mais lidas" dele. */
.odn-today__rank {
	color: var(--odn-accent);
	font: 800 22px / 1 var(--odn-sans);
	font-variant-numeric: tabular-nums;
}

.odn-ranked {
	margin: 0;
}

.odn-today__title {
	min-width: 0;
	color: var(--odn-ink);
	font: 600 17px / 1.35 var(--odn-sans);
	text-decoration: none;
}

.odn-today__title:hover {
	color: var(--odn-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.odn-today__cat {
	grid-column: 2;
	color: var(--odn-soft);
	font: 400 15px / 1.35 var(--odn-sans);
}

.odn__note {
	max-width: 62ch;
	margin: 12px 0 0;
	color: var(--odn-soft);
	font: 400 15px / 1.5 var(--odn-sans);
}

.odn__note--end {
	margin-top: 0;
}

/* ------------------------------------------------------------ celular */

@media (max-width: 560px) {
	.odn-form__line {
		flex-direction: column;
	}

	.odn .odn-form__submit {
		width: 100%;
	}

	.odn-topics__list,
	.odn .tnp-profile .tnp-lists {
		column-gap: 14px;
	}

	.odn-check,
	.odn .tnp-field-list label {
		font-size: 16px;
	}

	.odn-today {
		padding-inline: 14px;
	}
}

@media (max-width: 359px) {
	.odn-topics__list,
	.odn .tnp-profile .tnp-lists {
		grid-template-columns: 1fr;
	}
}