/* ==========================================================================
   Adult OT — Account, Character & Community experience (WEB-3)

   Presentation only. No field name, route, query or business rule changes.
   Where MyAAC ships its own inline <style> (the account dashboard does), these
   rules are written to win on specificity rather than by editing the template.
   ========================================================================== */

/* ======================================================== account ======== */

/* WEB-1.1 constrained .aot-page--account-manage to 620px so the LOGGED-OUT
   login form would stop sprawling. The same route serves the LOGGED-IN
   dashboard, which needs the full measure — it was being squeezed into a
   narrow column. `:has()` separates the two states without a template
   override: the dashboard is the only one containing #account-manage. */
.aot-page--account-manage .aot-content:has(#account-manage) {
	max-width: none;
}

/* MyAAC lays the dashboard out as a 150px float plus a margin-left column.
   Grid is both sturdier and responsive. */
#account-manage {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: var(--aot-space-5);
	padding: 0 !important;
	width: 100% !important;
	margin: 0 !important;
}

#account-manage > div#one {
	width: auto !important;
	float: none !important;
}

#account-manage > div#two {
	margin-left: 0 !important;
	padding-left: 0 !important;
	min-width: 0;
}

/* Account action menu. The upstream template hardcodes `color: black` and a
   light background in its own <style> block, so these need to be specific
   enough to win. */
.vertical-menu {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	overflow: hidden;
	position: sticky;
	top: calc(var(--aot-header-h) + 56px);
}

#account-manage .vertical-menu a,
.vertical-menu a {
	display: block;
	padding: 11px var(--aot-space-4) !important;
	background: transparent !important;
	color: var(--aot-text-secondary) !important;
	font-size: 14px;
	border-bottom: 1px solid var(--aot-border);
	border-left: 2px solid transparent;
	text-decoration: none;
}

#account-manage .vertical-menu a:last-child,
.vertical-menu a:last-child { border-bottom: 0; }

#account-manage .vertical-menu a:hover,
.vertical-menu a:hover {
	background: var(--aot-bronze-subtle) !important;
	color: var(--aot-text) !important;
	border-left-color: var(--aot-bronze);
}

/* The dashboard's own headings are h1/h2 sized, which shouts on a page that is
   mostly data. Bring them down to section-header scale. */
.aot-page--account-manage #account-manage h1,
.aot-page--account-manage #account-manage h2 {
	font-size: var(--aot-h4);
	letter-spacing: .06em;
	color: var(--aot-bronze-hi);
	margin: var(--aot-space-5) 0 var(--aot-space-3);
	padding-bottom: var(--aot-space-2);
	border-bottom: 1px solid var(--aot-border);
}

.aot-page--account-manage #account-manage h1:first-child,
.aot-page--account-manage #account-manage h2:first-child { margin-top: 0; }

/* "Registered: No" is emitted by manage.php as
   `<span style="color: red">No</span>`. Not having generated a recovery key is
   a neutral state, not an error, so it should not read like one. "Yes" keeps
   its positive colour. */
.aot-page--account-manage #account-manage span[style*="color: red"],
.aot-page--account-manage #account-manage .red {
	color: var(--aot-text-secondary) !important;
}

@media (max-width: 860px) {
	#account-manage {
		grid-template-columns: 1fr;
		gap: var(--aot-space-4);
	}

	.vertical-menu { position: static; }
}

/* ====================================================== character ======== */

/* Character name renders with MyAAC's inline online/offline colour. Offline
   red reads as an error on a profile page, so the name is neutralised and the
   state is carried by the status row instead. */
.aot-section--characters .aot-content span[style*="color: red"],
.aot-section--characters .aot-content span[style*="color:red"] {
	color: var(--aot-text) !important;
	font-weight: 600;
}

.aot-section--characters .aot-content span[style*="color: green"],
.aot-section--characters .aot-content span[style*="color:green"] {
	color: var(--aot-success-text) !important;
	font-weight: 600;
}

/* Outfit medallion. Upstream renders an absolutely positioned div with a
   hardcoded cream ring at a fixed pixel offset, holding an image from an
   external service. Retheme the ring and give it a surface so a failed
   external request degrades to a quiet placeholder rather than a broken icon. */
.aot-section--characters div[style*="border-radius:50px"] {
	border-color: var(--aot-border-accent) !important;
	background: var(--aot-surface-raised);
	box-shadow: var(--aot-shadow-sm);
}

/* Hides the broken-image glyph and alt text if outfit-images.ots.me is
   unreachable; when it loads, the image simply covers this. */
.aot-section--characters img[alt="player outfit"] {
	color: transparent;
	font-size: 0;
}

/* Legacy panel headers on character/guild pages are plain bold white cells.
   Give them the same voice as the theme's own panel titles. */
.aot-section--characters .aot-content td.white > b,
.aot-section--guilds .aot-content td.white > b {
	font-family: var(--aot-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
}

/* The generated signature image is a legacy artifact with light chrome. It is
   kept (upstream functionality is not removed) but stops competing with the
   character's real information. */
.aot-section--characters .aot-content img[src*="signature"],
.aot-section--characters .aot-content img[src$=".png"][width] {
	opacity: .8;
}

/* ========================================================= guilds ======== */

/* Guild logo: give it a frame, and a surface so a missing or invalid logo
   shows a quiet placeholder instead of a broken image. */
.aot-section--guilds .aot-content img[src*="images/guilds/"] {
	border: 1px solid var(--aot-border-accent);
	border-radius: var(--aot-radius-sm);
	background: var(--aot-surface-raised);
	padding: 3px;
	color: transparent;
	font-size: 0;
	object-fit: contain;
}

/* ================================================= shared: empty ========= */

/* MyAAC prints its empty states as plain sentences inside a table cell
   ("No guild members found.", "No one died on Adult OT", "There are no
   banishments yet."). They cannot be wrapped without a template override, so
   the cell itself is styled to read as a deliberate empty state. */
.aot-content td[colspan] {
	color: var(--aot-text-muted);
}

/* ================================================= shared: tables ======== */

/* Community listings share one language: guild members, online players,
   deaths and house lists. */
.aot-section--guilds .aot-content table,
.aot-page--online .aot-content table,
.aot-page--last-kills .aot-content table,
.aot-page--houses .aot-content table {
	font-size: 14px;
}

.aot-page--online .aot-content td,
.aot-page--last-kills .aot-content td {
	padding: 10px var(--aot-space-3);
}

/* Character links everywhere in the community section. */
.aot-content a[href*="/characters/"] {
	color: var(--aot-bronze);
	font-weight: 500;
}

.aot-content a[href*="/characters/"]:hover {
	color: var(--aot-bronze-hi);
}

/* ==================================================== last deaths ======== */

.aot-deaths__when {
	white-space: nowrap;
	width: 1%;
	color: var(--aot-text-muted);
}

.aot-deaths td strong { color: var(--aot-text); }

.aot-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* The `.aot-empty` block is defined in legacy.css; inside a legacy headline
   panel it should not add a second border on top of the panel's own. */
.aot-content .aot-empty {
	border: 0;
	background: transparent;
	padding: var(--aot-space-5) var(--aot-space-3);
}

/* ================================================ character search ======= */

/* Upstream hardcodes `style="width:165px"` on the search field, which is too
   small to read a full character name. Constrained to a comfortable measure
   instead, and full width on small screens. */
.aot-page--characters .aot-content input[name="name"] {
	width: 100% !important;
	max-width: 320px;
}

.aot-page--characters .aot-content form {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	gap: var(--aot-space-3);
	margin-top: var(--aot-space-3);
}

.aot-page--characters .aot-content form table,
.aot-page--characters .aot-content form tbody,
.aot-page--characters .aot-content form tr,
.aot-page--characters .aot-content form td {
	display: contents;
}

@media (max-width: 560px) {
	.aot-page--characters .aot-content input[name="name"] { max-width: none; }
}

/* MyAAC's error block ("The Following Errors Have Occurred:") is used by the
   character lookup and several account forms. Give it the theme's alert voice
   rather than leaving it as bare bold text. */
.aot-content .ErrorMessage,
.aot-content .error {
	color: var(--aot-danger-text);
}

/* The outfit medallion is positioned with a hardcoded `margin-left: 376px` on
   an absolutely positioned element, which pushes the DOCUMENT wider than the
   viewport on phones (measured: 513px of scrollWidth at a 390px viewport).
   Below the breakpoint it is placed back in the flow and the inner image's
   negative offsets — which exist only to crop a 128px sprite inside a 64px
   ring — are normalised. */
@media (max-width: 700px) {
	.aot-section--characters div[style*="border-radius:50px"] {
		position: static !important;
		margin: 0 0 var(--aot-space-3) !important;
		padding: 6px !important;
	}

	.aot-section--characters img[alt="player outfit"] {
		margin: 0 !important;
		width: 56px !important;
		height: 56px !important;
		object-fit: contain;
	}
}

/* ==================================================== heading rules ====== */

/* The shell adds a visually-hidden <h1> so pages that open at <h2> still have
   a top-level heading. A few upstream pages DO provide their own — guild
   detail renders the guild name as an h1 — which produced two h1 elements.
   Where the page supplies a real one, the shell's is withdrawn (display:none
   removes it from the accessibility tree, which is the intent). */
.aot-content:has(h1:not(.aot-visually-hidden)) h1.aot-visually-hidden {
	display: none;
}

/* ============================================ mobile: label/value ======== */

/* WEB-1.1 gives .aot-content a horizontal scroll container and data tables a
   min-width, which is right for wide listings (highscores, guild members, the
   account's character list). It is wrong for two-column label/value tables:
   on a phone the character page showed a column of labels with every value
   scrolled off-screen.
 
   Rows that contain exactly two cells are a label/value pair, so they stack
   instead. Wider tables are untouched and keep scrolling. */
@media (max-width: 700px) {
	.aot-section--characters .aot-content table,
	.aot-section--guilds .aot-content table {
		min-width: 0;
	}

	.aot-section--characters .aot-content tr:has(> td:nth-child(2):last-child),
	.aot-section--guilds .aot-content tr:has(> td:nth-child(2):last-child) {
		display: block;
		padding: var(--aot-space-2) 0;
	}

	.aot-section--characters .aot-content tr:has(> td:nth-child(2):last-child) > td,
	.aot-section--guilds .aot-content tr:has(> td:nth-child(2):last-child) > td {
		display: block;
		width: auto !important;
		border-bottom: 0;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	/* The label half stays quiet, the value gets the emphasis. */
	.aot-section--characters .aot-content tr:has(> td:nth-child(2):last-child) > td:first-child {
		color: var(--aot-text-muted);
		font-size: var(--aot-caption);
		text-transform: uppercase;
		letter-spacing: .08em;
	}
}

/* --- Outfit fallback (WEB-4.2.1) -----------------------------------------
   assets/js/character.js removes the <img> when the external outfit service
   fails and marks its container. `color: transparent` alone could not hide the
   broken-image glyph, which the browser paints itself.

   The result is a neutral Adult OT medallion — never a wrong outfit. */
.aot-section--characters .aot-outfit--unavailable {
	background-image: url("../brand/mark-monochrome.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42px 42px;
	opacity: .45;
}

/* A failed external item sprite keeps its slot but shows nothing, instead of a
   broken-image glyph. assets/js/character.js adds this class on error. */
.aot-section--characters img.aot-item--unavailable {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: var(--aot-surface-sunken, rgba(0, 0, 0, .25));
	border-radius: 3px;
	opacity: .5;
}