/* ==========================================================================
   WINNERA — ACCOUNT EXPERIENCE
   --------------------------------------------------------------------------
   Styles for the MY WINNERA area. Every rule here supports a Twig view that
   overrides a MyAAC core view; no backend markup was changed to make this work.

   Typography discipline continues: the decorative face is used only for the
   page title, character names and account identity. Forms, statistics, dates,
   emails, navigation and tables all use the body face.
   ========================================================================== */

/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.wn-acct { display: block; }

.wn-acct__head {
	margin-bottom: var(--wn-module-gap);
	padding-bottom: var(--wn-space-5);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-acct__title {
	margin: 0 0 var(--wn-space-2);
	font-family: var(--wn-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--wn-bone);
}

/* The account identity is a name — decorative face is correct */
.wn-acct__name { color: var(--wn-gold-bright); }

.wn-acct__lead {
	margin: 0;
	max-width: 62ch;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
}

.wn-acct__banned { color: #E39098; font-weight: 600; }

.wn-acct__note {
	margin: var(--wn-space-3) 0 0;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-muted);
}

/* Two-column interior: account nav + content. Collapses on tablet, because
   the portal already has a left rail on desktop.

   Tracks are pinned to minmax(0, 1fr): an `auto` track floors at the widest
   child's min-content, which lets long alert copy and forms push the column
   past the viewport on narrow screens. */
.wn-acct__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wn-module-gap);
	align-items: start;
}

@media (min-width: 900px) {
	.wn-acct__body { grid-template-columns: 208px minmax(0, 1fr); }
}

.wn-acct__side { min-width: 0; }

.wn-acct__main {
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wn-module-gap);
}

/* Alerts and forms must wrap, never widen their column */
.wn-alert { min-width: 0; overflow-wrap: anywhere; }
.wn-acct__main form { min-width: 0; }

/* Action rows */
.wn-acct__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
}

.wn-acct__actions form { margin: 0; }

.wn-acct__actions--submit { padding-top: var(--wn-space-2); }

.wn-acct__inline-form { margin-top: var(--wn-space-3); }

/* ==========================================================================
   ACCOUNT NAVIGATION
   ========================================================================== */

.wn-acct-nav {
	background: var(--wn-frame-face);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	box-shadow: var(--wn-shadow-sm), var(--wn-inset-top);
	overflow: hidden;
}

.wn-acct-nav__group + .wn-acct-nav__group { border-top: 1px solid var(--wn-border-hairline); }

.wn-acct-nav__label {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	margin: 0;
	padding: var(--wn-space-4) var(--wn-space-4) var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-label);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wn-gold-bright);
}

.wn-acct-nav__label::before {
	content: "";
	flex: none;
	width: 5px; height: 5px;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold);
	background: rgba(200, 163, 90, 0.3);
}

.wn-acct-nav__list { margin: 0; padding: 0 0 var(--wn-space-3); list-style: none; }

.wn-acct-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-2);
	padding: 0.4375rem var(--wn-space-4) 0.4375rem 1.5rem;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	color: var(--wn-text-secondary);
	transition: color var(--wn-dur) var(--wn-ease), background-color var(--wn-dur) var(--wn-ease);
}

.wn-acct-nav__link::before {
	content: "";
	position: absolute;
	left: var(--wn-space-4);
	top: 50%;
	width: 4px; height: 4px;
	margin-top: -2px;
	transform: rotate(45deg);
	border: 1px solid var(--wn-gold-deep);
	transition: background-color var(--wn-dur) var(--wn-ease), border-color var(--wn-dur) var(--wn-ease);
}

.wn-acct-nav__link:hover {
	background: rgba(200, 163, 90, 0.06);
	color: var(--wn-gold-bright);
}

.wn-acct-nav__link:hover::before { background: var(--wn-gold); border-color: var(--wn-gold); }

.wn-acct-nav__link[aria-current="page"] {
	background: rgba(200, 163, 90, 0.10);
	color: var(--wn-bone);
	font-weight: 600;
}

.wn-acct-nav__link[aria-current="page"]::before { background: var(--wn-gold-bright); border-color: var(--wn-gold-bright); }

.wn-acct-nav__link--unavailable { color: var(--wn-text-muted); cursor: default; }
.wn-acct-nav__link--unavailable:hover { background: none; color: var(--wn-text-muted); }
.wn-acct-nav__link--unavailable:hover::before { background: none; border-color: var(--wn-gold-deep); }

.wn-acct-nav__link--exit {
	padding-block: var(--wn-space-4);
	color: var(--wn-text-muted);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	font-size: var(--wn-text-label);
}

.wn-acct-nav__link--exit:hover { color: #E39098; }
.wn-acct-nav__link--exit::before { border-color: rgba(168, 48, 57, 0.6); }
.wn-acct-nav__link--exit:hover::before { background: var(--wn-blood-bright); border-color: var(--wn-blood-bright); }

/* On mobile the nav becomes a horizontal scroll strip rather than a tall list */
@media (max-width: 899px) {
	.wn-acct-nav { display: flex; overflow-x: auto; scrollbar-width: thin; }
	.wn-acct-nav__group { flex: none; }
	.wn-acct-nav__group + .wn-acct-nav__group {
		border-top: 0;
		border-left: 1px solid var(--wn-border-hairline);
	}
	.wn-acct-nav__list { display: flex; padding-bottom: var(--wn-space-2); }
	.wn-acct-nav__link { white-space: nowrap; }
}

/* ==========================================================================
   STATUS GRID
   ========================================================================== */

.wn-acct-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--wn-border-hairline);
}

@media (min-width: 640px) {
	.wn-acct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wn-acct-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wn-acct-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--wn-space-4);
	background: var(--wn-surface-raised);
}

.wn-acct-cell__label {
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

/* Statistics — body face, tabular figures */
.wn-acct-cell__value {
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-read);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wn-bone);
	font-variant-numeric: tabular-nums lining-nums;
}

.wn-acct-cell__value--sm { font-size: var(--wn-read-sm); }
.wn-acct-cell__value--good { color: #8FBE89; }
.wn-acct-cell__value--none { color: var(--wn-text-muted); }

.wn-acct-cell__meta {
	font-size: var(--wn-text-micro);
	color: var(--wn-text-muted);
}

/* ==========================================================================
   SECURITY LIST
   ========================================================================== */

.wn-sec { margin: 0; padding: 0; list-style: none; }

.wn-sec__row {
	display: flex;
	align-items: flex-start;
	gap: var(--wn-space-3);
	padding: var(--wn-space-4) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
}

.wn-sec__row:last-child { border-bottom: 0; }

/* State is conveyed by icon shape AND text, never by colour alone */
.wn-sec__state {
	flex: none;
	width: 16px; height: 16px;
	margin-top: 2px;
	border-radius: 50%;
	border: 1px solid var(--wn-border-iron);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
}

.wn-sec__state--ok {
	border-color: rgba(78, 122, 74, 0.6);
	background-color: rgba(78, 122, 74, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238FBE89' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.wn-sec__state--warn {
	border-color: rgba(181, 118, 44, 0.65);
	background-color: rgba(181, 118, 44, 0.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23D9A25F' stroke-width='2.2' stroke-linecap='round' d='M8 4v5M8 11.6v.2'/%3E%3C/svg%3E");
}

.wn-sec__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.wn-sec__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-body);
	font-weight: 600;
	color: var(--wn-bone);
}

.wn-sec__detail {
	font-size: var(--wn-text-tiny);
	line-height: 1.5;
	color: var(--wn-text-secondary);
	overflow-wrap: anywhere;
}

.wn-sec__row form { margin: 0; flex: none; }

@media (max-width: 559px) {
	.wn-sec__row { flex-wrap: wrap; }
	.wn-sec__row form,
	.wn-sec__row > .wn-btn { margin-left: calc(16px + var(--wn-space-3)); }
}

/* Very narrow phones: drop the alignment indent and let action labels wrap
   rather than push the row past the viewport edge. */
@media (max-width: 380px) {
	.wn-sec__row form,
	.wn-sec__row > .wn-btn { margin-left: 0; }
	.wn-sec__row .wn-btn { white-space: normal; }
	.wn-acct__actions .wn-btn { white-space: normal; }
}

/* ==========================================================================
   DEFINITION LIST
   ========================================================================== */

.wn-acct-dl { margin: 0; display: grid; gap: var(--wn-space-3); }

@media (min-width: 480px) {
	.wn-acct-dl { grid-template-columns: 140px minmax(0, 1fr); align-items: baseline; }
}

.wn-acct-dl dt {
	font-size: var(--wn-text-label);
	font-weight: 600;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	color: var(--wn-text-secondary);
}

.wn-acct-dl dd {
	margin: 0;
	font-size: var(--wn-text-small);
	color: var(--wn-bone);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   CHARACTER RECORDS
   ========================================================================== */

.wn-chars { margin: 0; padding: 0; list-style: none; }

.wn-char {
	display: flex;
	align-items: center;
	gap: var(--wn-space-4);
	padding: var(--wn-space-4) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
	transition: background-color var(--wn-dur) var(--wn-ease);
}

.wn-char:last-child { border-bottom: 0; }
.wn-char:hover { background: rgba(200, 163, 90, 0.04); }
.wn-char--deleted { opacity: 0.55; }

/* Level crest — the character's identity mark, ready to carry an outfit
   sprite once Winnera character art exists (see docs/ASSETS.md). */
.wn-char__crest {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	background:
		radial-gradient(circle at 50% 35%, rgba(200, 163, 90, 0.14), transparent 66%),
		linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wn-char__level {
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-read-sm);
	font-weight: 700;
	line-height: 1;
	color: var(--wn-gold-bright);
	font-variant-numeric: tabular-nums;
}

.wn-char__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--wn-space-1); }

/* A character name is a world name — decorative face */
.wn-char__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
	font-family: var(--wn-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wn-bone);
}

.wn-char__name a { color: inherit; }
.wn-char__name a:hover { color: var(--wn-gold-bright); }

.wn-char__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-1) var(--wn-space-4);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-secondary);
}

.wn-char__meta > span { position: relative; }

.wn-char__actions { flex: none; display: flex; gap: var(--wn-space-2); }

@media (max-width: 639px) {
	.wn-char { flex-wrap: wrap; }
	.wn-char__actions { width: 100%; margin-left: calc(52px + var(--wn-space-4)); }
}

@media (max-width: 400px) {
	.wn-char__actions { margin-left: 0; }
}

/* ==========================================================================
   ACCOUNT LOG
   ========================================================================== */

/* The backend supplies up to 1000 entries. All of them are rendered; the
   container scrolls so the page stays usable without hiding history. */
.wn-acct-log__scroll { max-height: 26rem; overflow-y: auto; scrollbar-width: thin; }

.wn-acct-log { width: 100%; border-collapse: collapse; font-family: var(--wn-font-body); }

.wn-acct-log thead th { position: sticky; top: 0; background: #14171C; z-index: 1; }

.wn-acct-log thead th {
	padding: var(--wn-space-3) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	text-align: left;
	color: var(--wn-gold);
	white-space: nowrap;
}

.wn-acct-log tbody td {
	padding: var(--wn-space-3) var(--wn-module-pad);
	border-bottom: 1px solid var(--wn-border-hairline);
	font-size: var(--wn-text-tiny);
	color: var(--wn-text-secondary);
	vertical-align: top;
}

.wn-acct-log tbody tr:last-child td { border-bottom: 0; }
.wn-acct-log tbody tr:hover { background: rgba(200, 163, 90, 0.04); }
.wn-acct-log b { color: var(--wn-bone); font-weight: 600; }

.wn-acct-log__date,
.wn-acct-log__ip {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--wn-text-muted);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.wn-form .wn-field:last-child { margin-bottom: 0; }

.wn-form .wn-rule { margin-block: var(--wn-space-5); }

.wn-fieldset {
	margin: 0 0 var(--wn-space-5);
	padding: 0;
	border: 0;
}

.wn-fieldset legend { padding: 0; }

/* Disabled read-only fields (e.g. current email) read as reference, not input */
.wn-input:disabled {
	color: var(--wn-text-muted);
	background: rgba(0, 0, 0, 0.28);
	cursor: default;
}

.wn-char-check {
	display: flex;
	align-items: center;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-2);
}

.wn-char-check img { width: 14px; height: 14px; image-rendering: pixelated; }
.wn-char-check .wn-field__hint,
.wn-char-check .wn-field__error { margin-top: 0; }

.wn-country { display: flex; align-items: center; gap: var(--wn-space-3); }
.wn-country img:not([src]),
.wn-country img[src=""] { display: none; }

/* ---- Choice controls (sex, town) ---------------------------------------- */

.wn-choice-row { display: flex; flex-wrap: wrap; gap: var(--wn-space-2); }
.wn-choice-row--wrap { max-height: 15rem; overflow-y: auto; }

.wn-choice { position: relative; cursor: pointer; }

.wn-choice input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}

.wn-choice__body {
	display: block;
	padding: 0.5rem 1rem;
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius-sm);
	transition: border-color var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease),
	            color var(--wn-dur) var(--wn-ease);
}

.wn-choice__name {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	font-weight: 600;
	color: var(--wn-text-secondary);
}

.wn-choice:hover .wn-choice__body { border-color: var(--wn-border-strong); }

.wn-choice input:checked + .wn-choice__body {
	background: rgba(200, 163, 90, 0.12);
	border-color: var(--wn-gold);
}

.wn-choice input:checked + .wn-choice__body .wn-choice__name { color: var(--wn-gold-bright); }

.wn-choice input:focus-visible + .wn-choice__body {
	outline: 2px solid var(--wn-gold);
	outline-offset: 2px;
}

/* ---- Vocation cards ------------------------------------------------------ */

/*
 * FIVE-VOCATION READY.
 *
 * auto-fit + minmax means the grid is driven entirely by how many vocations
 * the backend configures, never by a hardcoded column count. Four entries lay
 * out as four; a fifth (Monk, once the game side is configured) reflows
 * automatically with no template or stylesheet change.
 *
 * min(140px, 100%) stops the 140px floor from forcing horizontal overflow on
 * very narrow phones, which becomes reachable once a fifth card exists.
 *
 * PUBLIC TEST 01 — the fifth vocation (Monk, id 9) is now live, so the odd
 * count is the real case rather than a future one. A `1fr` maximum made the
 * last card in an incomplete row stretch to fill the whole remaining width:
 * with five cards that is a full-width Monk on any width fitting 2, 3 or 4
 * per row, which reads as a layout bug rather than a choice.
 *
 * Capping the track at 190px and centring the rows keeps every card the same
 * size whatever the count — 5 across on desktop, 3+2 on tablet, 2+2+1 on
 * phones — and it stays count-agnostic: a sixth vocation needs no CSS change.
 */
.wn-vocations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 190px));
	justify-content: center;
	gap: var(--wn-space-2);
}

.wn-vocation { position: relative; cursor: pointer; }

.wn-vocation input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}

.wn-vocation__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wn-space-2);
	padding: var(--wn-space-4) var(--wn-space-3);
	text-align: center;
	background:
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(200, 163, 90, 0.06), transparent 66%),
		linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	transition: border-color var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease);
}

.wn-vocation__sigil { width: 30px; height: 30px; color: var(--wn-gold); opacity: 0.5; }
.wn-vocation__sigil svg { width: 100%; height: 100%; }

.wn-vocation__name {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wn-text-secondary);
}

.wn-vocation:hover .wn-vocation__body { border-color: var(--wn-border-strong); }
.wn-vocation:hover .wn-vocation__sigil { opacity: 0.75; }

.wn-vocation input:checked + .wn-vocation__body {
	border-color: var(--wn-gold);
	background:
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(200, 163, 90, 0.18), transparent 66%),
		linear-gradient(180deg, #1B1E24, var(--wn-surface-sunken));
}

.wn-vocation input:checked + .wn-vocation__body .wn-vocation__sigil { opacity: 1; }
.wn-vocation input:checked + .wn-vocation__body .wn-vocation__name { color: var(--wn-gold-bright); }

.wn-vocation input:focus-visible + .wn-vocation__body {
	outline: 2px solid var(--wn-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   RESULT / CONFIRMATION SCREENS
   ========================================================================== */

.wn-result__body {
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	line-height: 1.65;
	color: var(--wn-text-secondary);
}

.wn-result__body b { color: var(--wn-bone); }
.wn-result__body a { color: var(--wn-text-gold); }
.wn-result__body ul { margin: var(--wn-space-3) 0 0; padding-left: 1.25rem; }
.wn-result__body li { margin-bottom: var(--wn-space-2); }
.wn-result__body p.error { color: #E39098; }

/* The recovery key is emitted by the backend inside an inline-styled span.
   Present it as a deliberate, selectable credential block. */
.wn-result__body span[style*="font-size"] {
	display: block;
	margin: var(--wn-space-4) 0;
	padding: var(--wn-space-4) var(--wn-space-5);
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-strong);
	border-left: 3px solid var(--wn-gold);
	border-radius: var(--wn-radius);
	font-family: var(--wn-font-mono) !important;
	font-size: 1.25rem !important;
	letter-spacing: 0.12em;
	color: var(--wn-gold-bright);
	overflow-wrap: anywhere;
	user-select: all;
}

.wn-result__actions { display: flex; flex-wrap: wrap; gap: var(--wn-space-2); }
.wn-result__actions form { margin: 0; }

/* Backend-supplied action markup (change-email confirm/cancel) arrives as a
   legacy table. Flatten it so it sits on the Winnera action row, and replace
   the sprite-based image submit — that .gif does not exist in this template. */
.wn-result__actions--legacy table,
.wn-result__actions--legacy tbody,
.wn-result__actions--legacy tr,
.wn-result__actions--legacy td,
.wn-result__actions--legacy form {
	display: contents;
	border: 0;
	background: none;
}

.wn-result__actions--legacy input[type="image"] {
	width: auto !important;
	height: auto !important;
	padding: 0.5rem 1rem;
	background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
	border: 1px solid var(--wn-gold-bright);
	border-radius: var(--wn-radius);
	color: var(--wn-text-inverse);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-tiny);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
	cursor: pointer;
	/* Hide the missing sprite, keep the control */
	font-size: 0;
	text-indent: -9999px;
	min-width: 120px;
	min-height: 34px;
	overflow: hidden;
}

.wn-result__actions--legacy input[type="image"]::after {
	content: "I Agree";
	text-indent: 0;
	font-size: var(--wn-text-tiny);
}

/* ==========================================================================
   MISC
   ========================================================================== */

.wn-acct-points { margin: 0; padding-left: 1.15rem; }

.wn-acct-points li {
	margin-bottom: var(--wn-space-2);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	line-height: 1.6;
	color: var(--wn-text-secondary);
}

.wn-acct-points li::marker { color: var(--wn-gold); }

.wn-headline .wn-content table { margin-bottom: 0; }
.wn-headline .wn-content td { border: 0; padding: 0; }

/* Wide account layout (registration) drops the sidebar entirely */
.wn-acct--wide .wn-acct__body { grid-template-columns: minmax(0, 1fr); }

/* Explicit track: an `auto` column floors at min-content and would let the
   form widen the page on narrow screens. */
.wn-acct--wide form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wn-module-gap);
}

/* ==========================================================================
   ACCOUNT EXPERIENCE v1.1
   Recovery flow, verification states and character services.
   ========================================================================== */

/* ---- Step indicator (account recovery) ----------------------------------
   State is carried by the mark, a text label and colour together — never by
   colour alone. */

.wn-steps {
	display: grid;
	gap: var(--wn-space-3);
	margin: 0 0 var(--wn-module-gap);
	padding: 0;
	list-style: none;
}

@media (min-width: 620px) {
	.wn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wn-step {
	display: flex;
	align-items: center;
	gap: var(--wn-space-3);
	padding: var(--wn-space-3) var(--wn-space-4);
	background: var(--wn-frame-face);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	min-width: 0;
}

.wn-step[data-state="current"] { border-color: var(--wn-border-strong); }

.wn-step__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 1px solid var(--wn-border-iron);
	background: var(--wn-surface-sunken);
	font-family: var(--wn-font-numeric);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	color: var(--wn-text-muted);
}

.wn-step[data-state="current"] .wn-step__mark {
	background: linear-gradient(180deg, var(--wn-gold-bright), var(--wn-gold));
	border-color: var(--wn-gold-bright);
	color: var(--wn-text-inverse);
}

.wn-step[data-state="upcoming"] .wn-step__mark { border-style: dashed; }

.wn-step__label {
	flex: 1;
	min-width: 0;
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	font-weight: 600;
	color: var(--wn-text-secondary);
}

.wn-step[data-state="current"] .wn-step__label { color: var(--wn-bone); }

.wn-step__state {
	flex: none;
	font-size: var(--wn-text-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wn-text-muted);
}

.wn-step[data-state="current"] .wn-step__state { color: var(--wn-gold-bright); }

/* ---- Recovery method chooser -------------------------------------------- */

.wn-recover-options { display: grid; gap: var(--wn-space-3); }

.wn-recover { position: relative; cursor: pointer; display: block; }

.wn-recover input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}

.wn-recover__body {
	display: block;
	padding: var(--wn-space-4);
	background: var(--wn-surface-sunken);
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	transition: border-color var(--wn-dur) var(--wn-ease),
	            background-color var(--wn-dur) var(--wn-ease);
}

.wn-recover:hover .wn-recover__body { border-color: var(--wn-border-strong); }

.wn-recover input:checked + .wn-recover__body {
	border-color: var(--wn-gold);
	background: rgba(200, 163, 90, 0.08);
}

.wn-recover input:focus-visible + .wn-recover__body {
	outline: 2px solid var(--wn-gold);
	outline-offset: 2px;
}

.wn-recover__name {
	display: block;
	margin-bottom: var(--wn-space-1);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-body);
	font-weight: 600;
	color: var(--wn-bone);
}

.wn-recover input:checked + .wn-recover__body .wn-recover__name { color: var(--wn-gold-bright); }

.wn-recover__note {
	display: block;
	font-size: var(--wn-text-tiny);
	line-height: 1.55;
	color: var(--wn-text-secondary);
	overflow-wrap: anywhere;
}

/* ---- Comment counter ----------------------------------------------------- */

.wn-counter {
	margin-left: var(--wn-space-2);
	font-variant-numeric: tabular-nums;
	color: var(--wn-text-secondary);
}

.wn-counter[data-over="true"] { color: var(--wn-danger-text); }

/* Long comments must not widen the layout */
.wn-textarea { overflow-wrap: anywhere; }

/* ==========================================================================
   RAW MESSAGE CLASSES
   account/confirm-email has NO Twig view — system/pages/account/confirm-email.php
   emits <div class="success|warning|note|error"> through MyAAC's message()
   helper. CSS is therefore the only template-side lever for that route, so
   these classes are styled as full Winnera alerts rather than left as bare divs.
   ========================================================================== */

.wn-content > .success,
.wn-content > .warning,
.wn-content > .note,
.wn-content > .info,
.wn-content > .error {
	position: relative;
	padding: var(--wn-space-5) var(--wn-space-5) var(--wn-space-5) calc(var(--wn-space-5) + 3px);
	margin-bottom: var(--wn-space-4) !important;
	background: var(--wn-frame-face) !important;
	border: 1px solid var(--wn-border-iron);
	border-radius: var(--wn-radius);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-small);
	line-height: 1.65;
	color: var(--wn-text-secondary) !important;
}

.wn-content > .success::before,
.wn-content > .warning::before,
.wn-content > .note::before,
.wn-content > .info::before,
.wn-content > .error::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	border-radius: var(--wn-radius) 0 0 var(--wn-radius);
}

.wn-content > .success::before { background: var(--wn-success); }
.wn-content > .warning::before { background: var(--wn-warning); }
.wn-content > .note::before    { background: var(--wn-gold); }
.wn-content > .info::before    { background: var(--wn-info); }
.wn-content > .error::before   { background: var(--wn-danger); }

/* A leading status word, so the state is never colour-only */
.wn-content > .success::after,
.wn-content > .warning::after,
.wn-content > .note::after,
.wn-content > .error::after {
	display: block;
	margin-top: var(--wn-space-3);
	font-size: var(--wn-text-micro);
	font-weight: 700;
	letter-spacing: var(--wn-track-label);
	text-transform: uppercase;
}

.wn-content > .success::after { content: "Verified"; color: #8FBE89; }
.wn-content > .warning::after { content: "Action needed"; color: #D9A25F; }
.wn-content > .note::after    { content: "Link invalid or expired"; color: var(--wn-gold); }
.wn-content > .error::after   { content: "Not applied"; color: #E39098; }

.wn-content > .success a,
.wn-content > .warning a,
.wn-content > .note a,
.wn-content > .error a { color: var(--wn-text-gold); }