/*
*	Match Elementor's global body font (confirmed via :root -- .elementor-kit-18):
*	--e-global-typography-text-font-family: "Lato"
*	--e-global-typography-text-font-size: 15px
*	--e-global-typography-text-font-weight: 400
*	--e-global-typography-text-line-height: 1.5em
*	Referencing these (rather than hardcoding the values) means this stays in
*	sync automatically if the site's global font ever changes later. Literal
*	values are kept as fallbacks in case the variable isn't present for some
*	reason (e.g. plugin content rendered somewhere outside the kit's scope).
*/
.swtng-my-games,
.swtng-open-games,
.swtng-account,
.swtng-register-form,
.swtng-login-form,
.swtng-turnsheet {
	font-family: var(--e-global-typography-text-font-family, 'Lato', sans-serif);
	font-size: var(--e-global-typography-text-font-size, 15px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
}
/*	Buttons/inputs don't inherit font-family from ancestors by browser
*	default (they use the OS's system UI font instead) -- needs an explicit
*	reset regardless of the rule above.
*/
.swtng-button,
.swtng-form input {
	font-family: inherit;
	font-size: inherit;
}

/*
*	Custom front end buttons
*/
.swtng-button {
	background-color: #1e90ff;
	display: inline-block;
	padding: 0.6em 1.4em;
	color: #e0f0f0 !important;	
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none !important;
}
.swtng-button:hover {
	background-color: #0080ff;
	color: white;	
}
.swtng-button.is-saving,
.swtng-button:disabled {
	background-color: #999;
	cursor: not-allowed;
	opacity: 0.8;
}
.swtng-button.is-saving:hover,
.swtng-button:disabled:hover {
	background-color: #999;
}
.swtng-button.secondary {
	background: transparent;
	color: #2a2a2a !important;
	border: 1px solid #2a2a2a;
}
.swtng-button.secondary:hover {
	background: #f0f0f8;
	color: #0a0f1f !important;
	border: 1px solid #0a0f1f;
}
.swtng-button:focus {
	outline: none;
}
.swtng-button:focus-visible {
	outline: 2px solid #1e90ff;
	outline-offset: 2px;
	background-color: #1e90ff;
}
.swtng-button.secondary:focus-visible {
	background-color: transparent;
}
.swtng-button-small {
	padding: 0.3em 0.8em;
	font-size: 0.8em;
}
.swtng-leave-game-form {
	margin: 0;
}
.swtng-open-game-detail .swtng-form select {
	width: 100%;
	max-width: 320px;
	padding: 0.5em;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
}
.swtng-game-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: 0 0 1.5em;
}
.swtng-summary-item {
	display: flex;
	flex-direction: column;
	flex: 1 1 180px;
}
.swtng-summary-label {
	font-weight: 600;
	margin-bottom: 0.2em;
}
.swtng-summary-value {
	color: #333;
}
/* 
*	Front-end auth forms. Minimal by design; intended to be overridden by the theme. 
*/
.swtng-form .swtng-field {
	margin-bottom: 1em;
}
.swtng-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}
.swtng-form input {
	width: 100%;
	max-width: 320px;
	padding: 0.5em;
	box-sizing: border-box;
}
.swtng-notice {
	padding: 0.75em 1em;
	margin-bottom: 1em;
	border-radius: 4px;
}
.swtng-notice-error {
	background: #fbeaea;
	color: #8a1f1f;
	border: 1px solid #e2b3b3;
}
.swtng-notice-error ul {
	margin: 0;
	padding-left: 1.2em;
}
/*	Same shape as .swtng-notice-error, amber rather than red -- for an
*	informational notice that isn't a rejection (currently only "the
*	reserved-name price changed, please confirm again").	*/
.swtng-notice-warning {
	background: #fff6e5;
	color: #6b4c00;
	border: 1px solid #f0d488;
}
.swtng-welcome {
	margin: 0 0 0.75em;
}

/*
*	Reserved names page. Minimal by design, same reasoning as the auth
*	forms above -- intended to be overridden by the theme.
*/
.swtng-reserved-names-list {
	margin: 0 0 1em;
	padding-left: 0px;
}
.swtng-reserved-names-list li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: 260px;
	background-color: #F6F6F5;
	padding: 5px 10px;
	margin-bottom: 5px;
}
.swtng-reserved-name-value {
	flex: 1 1 auto;
}
.swtng-delete-name-form {
	margin: 0;
	line-height: 0;
}
.swtng-delete-name-button {
	background: none;
	border: none;
	padding: 0.2em;
	line-height: 0;
	color: #999;
	cursor: pointer;
}
.swtng-delete-name-button:hover {
	color: #c0392b;
}
.swtng-delete-name-button:focus-visible {
	outline: 2px solid #1e90ff;
	outline-offset: 2px;
}
.swtng-delete-name-button svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}
/*	"Add a Reserved Name" toggle -- a normal .swtng-button.secondary, just
*	"illuminated" (is-active) while its panel is open, same convention as
*	.swtng-ts-orders-toggle.is-active below.	*/
.swtng-button.secondary.is-active {
	background: #eef2f8;
	border-color: #1e90ff;
	color: #12315c !important;
}
.swtng-button.secondary.is-active:hover {
	background: #eef2f8;
	border-color: #1e90ff;
}
/*	JS-driven (starwebtng.js toggles .is-open) -- same pattern as the
*	turnsheet order-entry panel, but this one's small and single-column
*	everywhere, so it doesn't need that panel's width/height dance, just
*	a plain reveal.	*/
.swtng-add-name-panel {
	display: none;
	margin-top: 0.75em;
}
.swtng-add-name-panel.is-open {
	display: block;
}
.swtng-field-help {
	font-size: 0.85em;
	color: #666;
	margin: 0.3em 0 0;
}
/*	Reserved-name purchase confirm step -- the price and post-purchase
*	balance need to read clearly since this is the one screen where a
*	player is looking right before money leaves their account.	*/
.swtng-confirm-name p {
	margin: 0 0 0.6em;
}
.swtng-confirm-name .swtng-confirm-name-form {
	display: inline-block;
	margin: 0 0.5em 0 0;
}
/*
*	My Games lobby.
*/
.swtng-games-section {
	margin-bottom: 2em;
}
.swtng-games-section h3 {
	margin-bottom: 0.6em;
	font-size: 1.15em;
}
.swtng-games-needs-turn h3 {
	color: #b3261e;
}
.swtng-games-empty {
	color: #777;
	font-style: italic;
	margin: 0;
}
.swtng-badge {
	display: inline-block;
	background: #eef2f8;
	color: #1a2b4a;
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.2em 0.6em;
	border-radius: 12px;
	margin: 0 0.3em 0.2em 0;
}
.swtng-badge-realtime {
	background: #8b3dd1;
	color: #fff;
	font-weight: 700;
}
.swtng-character-summary-line {
	font-size: 0.85em;
	color: #666;
}
.swtng-games-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 30, 60, 0.06);
}
.swtng-games-table th,
.swtng-games-table td {
	text-align: left;
	padding: 0.4em 0.7em;
}
.swtng-games-table thead th {
	background: #eef2f8;
	color: #1a2b4a;
	font-weight: 600;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid #e2e6ec;
}
.swtng-games-table tbody tr {
	border-bottom: 1px solid #eef0f4;
}
.swtng-games-table tbody tr:last-child {
	border-bottom: none;
}
.swtng-games-table tbody tr:nth-child(even) {
	background: #fafbfd;
}
.swtng-games-table tbody tr:hover {
	background: #eef6ff;
}
/*	Needs Your Turn gets a left accent stripe on the card, reinforcing urgency	*/
.swtng-games-needs-turn .swtng-games-table {
	border-left: 4px solid #b3261e;
}
/*	Narrow screens: stack each row as a labelled card instead of a horizontal table	*/
@media (max-width: 600px) {
	.swtng-games-table thead {
		display: none;
	}
	.swtng-games-table,
	.swtng-games-table tbody,
	.swtng-games-table tr,
	.swtng-games-table td {
		display: block;
		width: 100%;
	}
	.swtng-games-table tr {
		padding: 0.5em 1em;
	}
	.swtng-games-table td {
		padding: 0.25em 0;
		border: none !important;
	}
	.swtng-games-table td::before {
		content: attr(data-label);
		display: inline-block;
		font-weight: 600;
		width: 6em;
		color: #666;
	}
}
/*
*	Fix the main navigation menu on mobiles
*/
#swtng-main-menu .hfe-dropdown {
	left: -90px !important;
	width: 300px !important;
}

/*
*	Fix the bottom border of elementor tabs so the active tab seems to blend into the active content grid-area: 
*/
.e-n-tab-title[aria-selected="true"] {
	position: relative;
	z-index: 2;
}
.e-n-tab-title[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: -3px;
	height: 4px;
	background: #fff;
}

/*
*	Turnsheet — pure monochrome by design (colour-coding may become an
*	option later; off by default). The header summary block above stays in
*	the site's normal font ("clean modern"); everything below it (.swtng-ts-
*	plain) is monospace to match the original FBI plain-text appearance.
*/
.swtng-turnsheet {
	color: #111;
}

.swtng-ts-positions {
	display: flex;
	gap: 0.4em;
	flex-wrap: wrap;
	margin-bottom: 0.75em;
}
.swtng-ts-position-tab {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid #111;
	border-radius: 3px;
	color: #111;
	text-decoration: none;
	font-size: 0.9em;
}
.swtng-ts-position-tab.active {
	background: #111;
	color: #fff;
	font-weight: 600;
}

.swtng-ts-turnnav {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.swtng-ts-turnnav-label {
	font-size: 0.85em;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.swtng-ts-turnnav-item {
	display: inline-block;
	padding: 0.2em 0.65em;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.85em;
	text-decoration: none;
	color: #333;
}
.swtng-ts-turnnav-item.active {
	background: #111;
	border-color: #111;
	color: #fff;
	font-weight: 600;
}
.swtng-ts-turnnav-current {
	font-size: 0.85em;
	opacity: 0.75;
}

.swtng-ts-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2em;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 1em 1.25em;
	margin-bottom: 1em;
}
.swtng-ts-header-info {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	flex: 1 1 auto;
}
.swtng-ts-header-item {
	display: flex;
	flex-direction: column;
	flex: 1 1 130px;
}
.swtng-ts-header-label {
	font-size: 0.75em;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.15em;
}
.swtng-ts-header-value {
	font-weight: 600;
}
.swtng-ts-history-tag {
	font-size: 0.8em;
	font-weight: 400;
	color: #555;
}

/*	Session 20: a boxed/modern final-rankings table used to live here.
*	Checked against a real Turn 23 FBI sample and removed -- the real
*	"Final Results" block is plain inline text inside .swtng-ts-plain
*	itself (built in TurnsheetBuilder::renderHtml()), not a separately
*	styled callout, so it needs no CSS of its own at all.	*/

/*	Everything below the header summary is deliberately plain text, matching
*	the original FBI turnsheet as closely as possible -- no boxes, no per-
*	element classes for world/fleet/status (that's all just <br>-separated
*	text in the template now). Monospace matches the original: plain-text
*	emails from that era rendered in the client's default monospace font
*	(Courier New or similar) -- the header block above stays in the site's
*	normal font since it's deliberately "clean modern," not an FBI replica.
*/
.swtng-ts-plain {
	font-family: 'Courier New', Courier, monospace;
	line-height: 1.6;
	overflow-wrap: break-word;
}
.swtng-ts-indent {
	padding-left: 1.5em;
}

/*
*	Order entry panel -- JS-driven (starwebtng.js toggles .is-open), not
*	native <details>. Switched from <details> because its native open/close
*	only reliably animated on the first toggle, not repeat ones -- moving to
*	a plain class toggle sidesteps whatever browser-internal handling of
*	<details> was interfering. Reveal mechanism: the OUTER element
*	(.swtng-ts-orders-panel) is what actually animates (width on desktop,
*	height on mobile) and clips with overflow:hidden; the INNER element
*	(.swtng-ts-orders-inner) stays a fixed size the whole time and simply
*	gets progressively uncovered as the outer box grows -- content doesn't
*	reflow or fade separately, it just slides into view with the clip edge.
*	This is a "clean modern" UI element, not part of the FBI replica -- it
*	inherits the site's normal font, not the monospace .swtng-ts-plain font.
*/
.swtng-ts-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	align-items: flex-start;
}
.swtng-ts-content {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/*	Header toggle button -- "illuminated" (is-active) when the panel is open.
*	Explicit :focus/:active overrides are needed here, same reason as
*	.swtng-button elsewhere in this file: browser/theme default button
*	focus-state styling can override background/border independently of
*	anything set here, and will otherwise bleed through on click.
*/
.swtng-ts-orders-toggle {
	background: transparent;
	border: 1px solid #999;
	border-radius: 4px;
	padding: 0.4em 1em;
	font-weight: 600;
	font-size: 0.9em;
	cursor: pointer;
	color: #333;
	margin-left: auto;
}
.swtng-ts-orders-toggle:hover {
	border-color: #666;
}
.swtng-ts-orders-toggle:focus,
.swtng-ts-orders-toggle:focus-visible,
.swtng-ts-orders-toggle:active {
	outline: none;
	background: transparent;
	border-color: #999;
	color: #333;
}
.swtng-ts-orders-toggle:focus-visible {
	outline: 2px solid #1e90ff;
	outline-offset: 2px;
}
.swtng-ts-orders-toggle.is-active {
	background: #eef2f8;
	border-color: #1e90ff;
	color: #12315c;
}
.swtng-ts-orders-toggle.is-active:hover,
.swtng-ts-orders-toggle.is-active:focus,
.swtng-ts-orders-toggle.is-active:focus-visible,
.swtng-ts-orders-toggle.is-active:active {
	background: #eef2f8;
	border-color: #1e90ff;
	color: #12315c;
}
.swtng-ts-orders-toggle.is-active:hover {
	border-color: #1e90ff;
}

/*	Mobile-first: vertical slide, full width, height clipped/animated	*/
.swtng-ts-orders-panel {
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: height 0.7s ease;
}
.swtng-ts-orders-panel.is-open {
	height: 1280px;
}
.swtng-ts-orders-inner {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.75em 1.25em;
}

@media (min-width: 900px) {
	.swtng-ts-layout {
		flex-direction: row;
		align-items: flex-start;
	}
	/*	Desktop: horizontal slide instead -- cancel the mobile height
	*	animation, animate width, clip and reveal from the left edge.
	*	flex-basis deliberately stays 'auto' in BOTH states here (never
	*	changes) -- an explicit flex-basis takes precedence over width and
	*	has no transition of its own, which was why opening used to snap
	*	instantly while closing (going back to basis:auto, which defers to
	*	width) animated fine. Leaving basis alone and letting width alone
	*	control size fixes both directions the same way.	*/
	.swtng-ts-orders-panel {
		height: auto;
		width: 0;
		flex: 0 0 auto;
		transition: width 0.7s ease;
	}
	.swtng-ts-orders-panel.is-open {
		height: auto;
		width: 365px;
	}
	.swtng-ts-orders-inner {
		width: 365px;
	}
}

/*
*	Order panel content (Stage B: read-only display of whatever's already
*	saved -- no forms yet). Uses the site's normal font throughout except
*	the raw order text itself, which gets monospace since compact order
*	codes (e.g. F123W209W48W75) read better that way.
*/
.swtng-ts-orders-heading {
	margin: 0 0 0.65em;
	font-size: 1em;
}
.swtng-ts-orders-status-row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.75em;
}
.swtng-ts-orders-badge-submitted {
	background: #eaf7ee;
	color: #1f6b34;
}
.swtng-ts-orders-badge-draft {
	background: #fdf3e0;
	color: #8a5a00;
}
.swtng-ts-orders-timestamp {
	font-size: 0.85em;
	color: #666;
}
.swtng-ts-orders-errors {
	background: #fbeaea;
	border: 1px solid #e2b3b3;
	border-radius: 4px;
	padding: 0.4em 0.65em;
	margin-bottom: 0.75em;
}
.swtng-ts-orders-error-line {
	font-size: 0.72em;
	line-height: 1.35;
	color: #8a1f1f;
	font-family: 'Courier New', Courier, monospace;
}
.swtng-ts-orders-warnings {
	background: #fdf3e0;
	border: 1px solid #e8cf9a;
	border-radius: 4px;
	padding: 0.4em 0.65em;
	margin-bottom: 0.75em;
}
.swtng-ts-orders-warning-line {
	font-size: 0.72em;
	line-height: 1.35;
	color: #8a5a00;
	font-family: 'Courier New', Courier, monospace;
}
.swtng-ts-orders-success {
	background: #eaf7ee;
	border: 1px solid #b9dfc4;
	border-radius: 4px;
	padding: 0.4em 0.65em;
	margin-bottom: 0.75em;
	font-size: 0.85em;
	color: #1f6b34;
}
.swtng-ts-orders-form {
	margin: 0;
}
.swtng-ts-orders-textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.85em;
	background: #f7f7f7;
	border: 1px solid #e2e6ec;
	border-radius: 4px;
	padding: 0.6em 0.75em;
	resize: vertical;
}
.swtng-ts-orders-form-actions {
	margin-top: 0.6em;
	display: flex;
	justify-content: space-between;
	gap: 0.6em;
}

/*
*	Admin summary (admin_summary shortcode) -- renders nothing for
*	non-admins, so this only ever needs to look right for the one person
*	who'll ever see it. Deliberately small; expected to grow.
*/
.swtng-admin-summary {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.swtng-admin-summary-alert {
	background: #fdf3e0;
	color: #8a5a00;
	border: 1px solid #e8cf9a;
	border-radius: 4px;
	padding: 0.3em 0.7em;
	font-size: 0.85em;
	font-weight: 600;
}

.swtng-balance {
	font-size: 2em;
	color: #1E90FF;
}