/*
 * WTR Accounts screens in Tidewater (WP9, analysis/10 §7.2): CSS only, no template copies
 * (nonces, Turnstile, honeypots and redirects stay the plugin's). Guest task pages (login,
 * join, join/profile, reset-password, unsubscribe) become the modal panel laid in the page;
 * member pages (account, account/predictions, account/settings) take the petrol hero and the
 * WTR 9 results pattern. Plugin variables (--wtra-*) are re-pointed to tokens; selectors are
 * scoped `.wx .wtra…` so they outrank auth.css. Colour only through tokens.
 */

.wx .wtra {
	--wtra-ink: var(--wtr-heading);
	--wtra-emerald: var(--wtr-btn);
	--wtra-emerald-bright: var(--wtr-accent);
	--wtra-page: var(--wtr-bg);
	--wtra-surface: var(--wtr-section);
	--wtra-muted: var(--wtr-meta);
	--wtra-silver: var(--wtr-control);
	--wtra-hairline: var(--wtr-border);
	--wtra-warning: var(--wtr-amber-700);
	--wtra-error: var(--wtr-loss);
	--wtra-mono: var(--wtr-ff-mono);
	font-family: var(--wtr-ff-sans);
	color: var(--wtr-text);
	background: var(--wtr-bg);
}

/* ---------- guest task pages: one centred panel (+ the side panel from 1024) ---------- */
.wx .wtra__inner {
	max-width: none;
	margin: 0 auto;
	padding: 24px var(--wtr-margin) 48px;
	display: grid;
	grid-template-columns: min(100%, 460px);
	justify-content: center;
	gap: 24px;
}
.wx.wx-acct-join-profile .wtra__inner { grid-template-columns: min(100%, 560px); }
.wx .wtra__task {
	display: grid;
	gap: 16px;
	align-content: start;
	padding: 28px 20px;
	border: 1px solid var(--wtr-border);
	border-radius: 12px;
	background: var(--wtr-surface);
}
.wx .wtra__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 800 13px/1 var(--wtr-ff-sans);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wtr-tag-text);
}
.wx .wtra__eyebrow::before {
	content: "";
	flex: none;
	inline-size: 37px;
	block-size: 22px;
	background: currentColor;
	-webkit-mask: url("../img/wtr-mark.svg") center / contain no-repeat;
	mask: url("../img/wtr-mark.svg") center / contain no-repeat;
}
.wx .wtra__title { margin: 0; font: 800 26px/1.15 var(--wtr-ff-sans); letter-spacing: -.01em; color: var(--wtr-heading); }
.wx .wtra__intro { margin: 0; font: 400 17px/1.5 var(--wtr-ff-serif); color: var(--wtr-text); }

/* Messages: inline, 4 px edge, words carry the meaning. */
.wx .wtra-msg {
	margin: 0;
	padding: 12px 14px 12px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--wtr-surface);
	box-shadow: inset 4px 0 0 var(--wtr-control), inset 0 0 0 1px var(--wtr-border);
	font: 600 14.5px/1.45 var(--wtr-ff-sans);
	color: var(--wtr-heading);
}
.wx .wtra-msg p { margin: 0 0 10px; font: inherit; color: inherit; }
.wx .wtra-msg--success { box-shadow: inset 4px 0 0 var(--wtr-win), inset 0 0 0 1px var(--wtr-border); }
.wx .wtra-msg--error { box-shadow: inset 4px 0 0 var(--wtr-loss), inset 0 0 0 1px var(--wtr-border); }

/* Magic link block and forms. */
.wx .wtra-magicblock { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }
.wx .wtra-magicblock__h { margin: 0; font: 700 17px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-magicblock__p { margin: 0; font: 400 14px/1.45 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wtra-magic, .wx .wtra-form { display: grid; gap: 14px; }
.wx .wtra-field { display: grid; gap: 6px; margin: 0; }
.wx .wtra-label, .wx .wtra-magic__label { font: 600 14px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-input, .wx .wtra-magic__input, .wx .wtra-select {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--wtr-control);
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-surface);
	color: var(--wtr-heading);
	font: 400 16px/1.3 var(--wtr-ff-sans);
}
.wx .wtra-input--sm { min-block-size: 44px; }
.wx .wtra-input.is-invalid, .wx .wtra-input[aria-invalid="true"] { border-color: var(--wtr-loss); }
.wx .wtra-err, .wx .wtra-check.is-invalid span { font: 600 13px/1.4 var(--wtr-ff-sans); color: var(--wtr-loss); }
.wx .wtra-hint, .wx .wtra-optional, .wx .wtra-alt__note, .wx .wtra-alt__terms { font: 400 13px/1.45 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wtra-reveal { position: relative; }
.wx .wtra-reveal .wtra-input { padding-right: 72px; }
.wx .wtra-reveal__btn {
	position: absolute;
	inset-block: 2px;
	right: 2px;
	min-inline-size: 64px;
	border: 0;
	border-radius: 4px;
	background: none;
	font: 600 14px/1 var(--wtr-ff-sans);
	color: var(--wtr-link);
	cursor: pointer;
}
.wx .wtra-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.wx .wtra-check { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; font: 400 15px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); cursor: pointer; }
.wx .wtra-check input { inline-size: 22px; block-size: 22px; margin: 0; accent-color: var(--wtr-btn); }
.wx .wtra-link { font: 700 14px/1.3 var(--wtr-ff-sans); color: var(--wtr-link); text-decoration: underline; text-underline-offset: 2px; }
.wx .wtra-row .wtra-link { display: inline-flex; align-items: center; min-block-size: 44px; }
.wx .wtra-actions { display: grid; gap: 10px; margin: 0; }
.wx .wtra-btn, .wx .wtra-magic__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 0 20px;
	border: 1.5px solid var(--wtr-control);
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-surface);
	color: var(--wtr-heading);
	font: 600 15px/1.2 var(--wtr-ff-sans);
	text-decoration: none;
	cursor: pointer;
}
.wx .wtra-btn--primary, .wx .wtra-magic__go { border-color: var(--wtr-btn); background: var(--wtr-btn); color: var(--wtr-btn-text); }
.wx .wtra-btn--primary:hover, .wx .wtra-magic__go:hover { background: var(--wtr-btn-hover); border-color: var(--wtr-btn-hover); }
.wx .wtra-actions .wtra-btn--primary, .wx .wtra-magic__go { inline-size: 100%; }
.wx .wtra-btn--danger { border-color: var(--wtr-loss); background: transparent; color: var(--wtr-loss); }
.wx .wtra-or, .wx .wtra-alt__divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 400 13px/1 var(--wtr-ff-sans);
	color: var(--wtr-meta);
}
.wx .wtra-or::before, .wx .wtra-or::after, .wx .wtra-alt__divider::before, .wx .wtra-alt__divider::after {
	content: "";
	position: static;
	block-size: 1px;
	background: var(--wtr-border);
}
.wx .wtra-swap { margin: 0; text-align: center; font: 400 13px/1.5 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wtra-swap .wtra-link { font-size: 13px; }
.wx .wtra-turnstile { min-block-size: 0; }
.wx .wtra :focus-visible { outline: 2px solid var(--wtr-focus); outline-offset: 2px; }

/* Side panel ("Next up" / "What an account gets you"). */
.wx .wtra-fx { flex-wrap: wrap; min-width: 0; }
.wx .wtra-fx__name { min-width: 0; overflow-wrap: anywhere; }
.wx .wtra__panel {
	min-width: 0;
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 24px 20px;
	border: 1px solid var(--wtr-border);
	border-radius: 12px;
	background: var(--wtr-surface);
}
.wx .wtra__panel-eyebrow { margin: 0; font: 800 12px/1.3 var(--wtr-ff-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wtr-tag-text); }
.wx .wtra__panel-body { margin: 0; font: 400 16px/1.5 var(--wtr-ff-serif); color: var(--wtr-text); }
.wx .wtra__panel-meta { margin: 0; font: 500 13px/1.4 var(--wtr-ff-mono); color: var(--wtr-meta); }
.wx .wtra__panel-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wx .wtra__panel-list li { position: relative; padding-left: 28px; font: 400 16px/1.45 var(--wtr-ff-serif); color: var(--wtr-text); }
.wx .wtra__panel-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	inline-size: 18px;
	block-size: 18px;
	background: var(--wtr-win);
	-webkit-mask: var(--wx-tick) center / contain no-repeat;
	mask: var(--wx-tick) center / contain no-repeat;
}

/* Onboarding team picker: filter-chip "on" look for the chosen team. */
.wx .wtra-team__label { border: 1.5px solid var(--wtr-border); border-radius: 8px; background: var(--wtr-surface); min-block-size: 44px; }
.wx .wtra-team__input:checked + .wtra-team__label { border-color: var(--wtr-btn); background: var(--wtr-tag-bg); }
.wx .wtra-team__input:checked + .wtra-team__label .wtra-team__name { color: var(--wtr-tag-text); font-weight: 700; }
.wx .wtra-team__badge { border-radius: 6px; background: var(--wtr-logo-tile); box-shadow: inset 0 0 0 1px var(--wtr-logo-ring); }
.wx .wtra-combo__list { border: 1px solid var(--wtr-border); border-radius: 8px; background: var(--wtr-surface); box-shadow: var(--wtr-shadow-2); }
.wx .wtra-combo__option.is-active { background: var(--wtr-tag-bg); color: var(--wtr-tag-text); }

/* ---------- member pages: petrol hero, tabs, record, calls ---------- */
.wx .wtra-account { padding: 0 0 48px; }
.wx .wtra-account__inner { max-width: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.wx .wtra-account__inner > :not(.wtra-hero):not(.wtra-tabs):not(.wtra-hero__name) { margin-inline: var(--wtr-margin); max-width: 880px; }
/* Wide screens: the cards use the page width (the My results pattern), forms keep a readable measure. */
@media (min-width: 1024px) {
	.wx .wtra-account__inner > :not(.wtra-hero):not(.wtra-tabs):not(.wtra-hero__name) { max-width: none; }
	.wx .wtra-account .wtra-card form, .wx .wtra-account .wtra-card .wtra-form { max-width: 640px; }
}
/* Predictions and Settings print their H1 without a hero: the same petrol band. */
.wx .wtra-account__inner > .wtra-hero__name { margin: 0; padding: 24px var(--wtr-margin) 28px; background: var(--wtr-header); }
.wx .wtra-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 24px var(--wtr-margin) 28px;
	border: 0;
	background: var(--wtr-header);
	color: var(--wtr-header-text);
}
.wx .wtra-avatar { flex: none; inline-size: 56px; block-size: 56px; border: 0; border-radius: 50%; background: var(--wtr-accent); color: var(--wtr-cta-text); overflow: hidden; }
.wx .wtra-avatar img { border-radius: 50%; }
.wx .wtra-avatar__mono { font: 800 18px/1 var(--wtr-ff-sans); color: var(--wtr-cta-text); }
.wx .wtra-hero__name { margin: 0; font: 800 30px/1.04 var(--wtr-ff-sans); letter-spacing: -.02em; color: var(--wtr-header-text); }
.wx .wtra-hero__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font: 400 15px/1.4 var(--wtr-ff-sans); color: var(--wtr-header-meta); }
.wx .wtra-hero__meta span + span::before { content: "·"; margin-right: 12px; }
.wx .wtra-tabs {
	display: flex;
	gap: 4px;
	margin: -24px 0 0;
	padding: 0 max(0px, calc(var(--wtr-margin) - 14px));
	border-bottom: 1px solid var(--wtr-border);
	background: var(--wtr-surface);
	overflow-x: auto;
	scrollbar-width: none;
}
.wx .wtra-tabs__link {
	display: inline-flex;
	align-items: center;
	flex: none;
	block-size: 52px;
	padding: 0 14px;
	border: 0;
	font: 600 15px/1 var(--wtr-ff-sans);
	color: var(--wtr-meta);
	text-decoration: none;
	white-space: nowrap;
}
.wx .wtra-tabs__link:hover { color: var(--wtr-heading); }
.wx .wtra-tabs__link.is-current, .wx .wtra-tabs__link[aria-current="page"] { font-weight: 700; color: var(--wtr-heading); box-shadow: inset 0 -3px 0 var(--wtr-indicator); }
.wx .wtra-tabs__link--out { margin-left: auto; color: var(--wtr-link); }
.wx .wtra-card {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
}
.wx .wtra-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.wx .wtra-card__title { margin: 0; font: 800 20px/1.2 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-card__body { margin: 0; font: 400 15px/1.5 var(--wtr-ff-sans); color: var(--wtr-text); }
.wx .wtra-card--danger { box-shadow: inset 4px 0 0 var(--wtr-loss); }
.wx .wtra-card--empty { justify-items: start; }
.wx .wtra-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
	list-style: none;
	overflow: hidden;
}
.wx .wtra-stat { display: grid; gap: 4px; margin: 0 -1px -1px 0; padding: 16px 18px; border: 0; border-right: 1px solid var(--wtr-border); border-bottom: 1px solid var(--wtr-border); background: var(--wtr-surface); text-align: left; }
.wx .wtra-stat__value { font: 600 28px/1.1 var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx .wtra-stat__label { font: 600 13px/1.3 var(--wtr-ff-sans); letter-spacing: 0; text-transform: none; color: var(--wtr-text); }
.wx .wtra-table { inline-size: 100%; border-collapse: collapse; }
.wx .wtra-table th { padding: 0 8px; block-size: 42px; border-bottom: 1px solid var(--wtr-heading); font: 700 11.5px/1 var(--wtr-ff-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wtr-meta); text-align: left; }
.wx .wtra-table td { padding: 0 8px; block-size: 48px; border-bottom: 1px solid var(--wtr-border); font: 400 14px/1.3 var(--wtr-ff-mono); color: var(--wtr-text); }
.wx .wtra-table td:first-child { font: 600 15px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-calls { display: grid; margin: 0; padding: 0; list-style: none; }
.wx .wtra-calls__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--wtr-border); }
.wx .wtra-calls__match { display: grid; gap: 2px; min-width: 0; }
.wx .wtra-calls__teams { font: 600 16px/1.35 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-calls__call { font: 400 14px/1.4 var(--wtr-ff-sans); color: var(--wtr-text); }
.wx .wtra-calls__result { display: inline-flex; align-items: center; gap: 10px; }
.wx .wtra-calls__actual { font: 600 15px/1 var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx .wtra-calls__points {
	display: inline-flex;
	align-items: center;
	block-size: 30px;
	padding: 0 12px;
	border-radius: var(--wtr-radius-pill);
	background: var(--wtr-section);
	font: 700 13.5px/1 var(--wtr-ff-sans);
	color: var(--wtr-meta);
}
.wx .wtra-calls__points.is-scored { background: var(--wtr-win); color: var(--wtr-on-status); }
.wx .wtra-calls__note { font: 600 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wtra-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--wtr-radius-xs); background: var(--wtr-tag-bg); color: var(--wtr-tag-text); font: 800 11.5px/1.4 var(--wtr-ff-sans); }
.wx .wtra-fixtures { display: grid; margin: 0; padding: 0; list-style: none; }
.wx .wtra-fixtures__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--wtr-border); }
.wx .wtra-fixtures__match { font: 600 15px/1.35 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wtra-fixtures__match a { color: var(--wtr-link); }
.wx .wtra-fixtures__when { font: 500 13px/1.35 var(--wtr-ff-mono); color: var(--wtr-meta); }
.wx .wtra-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wx .wtra-pager__count { font: 400 14px/1.4 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wtra-resend { margin: 0; }

@media (min-width: 600px) {
	.wx .wtra__inner { padding-block: 40px 72px; }
	.wx .wtra__task { padding: 28px; border-radius: var(--wtr-radius-lg); }
	.wx .wtra-hero { padding-block: 28px 32px; }
	.wx .wtra-hero__name { font-size: 38px; }
	.wx .wtra-avatar { inline-size: 72px; block-size: 72px; }
}
@media (min-width: 1024px) {
	.wx .wtra__inner { grid-template-columns: minmax(0, 460px) 336px; gap: 56px; align-items: start; }
	.wx.wx-acct-join-profile .wtra__inner { grid-template-columns: minmax(0, 560px) 336px; }
	.wx .wtra-hero__name { font-size: 46px; }
}