/*
 * Mortarox OTserver: reusable components (buttons, panels, headings, ornaments, badges).
 * Requires tokens/mortarox-tokens.css and fonts/fonts.css. Class prefix: .mx-
 * Paths are relative to this file (ornaments live in ../ornaments/).
 */

/* ---- Typography ---- */
.mx-display,
.mx-heading {
	font-family: var(--mx-font-display);
	letter-spacing: var(--mx-tracking-display);
	text-transform: uppercase;
	color: var(--mx-white);
	margin: 0;
}
.mx-display { font-size: var(--mx-text-2xl); font-weight: 700; text-shadow: 0 2px 0 #000, var(--mx-glow-red); }
.mx-heading { font-size: var(--mx-text-lg); font-weight: 700; }
.mx-eyebrow {
	font-family: var(--mx-font-display);
	font-size: var(--mx-text-xs);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--mx-silver-dim);
}
.mx-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Divider ornament ---- */
.mx-divider {
	height: 20px;
	margin: var(--mx-space-4) auto;
	max-width: 400px;
	background: url("../ornaments/divider.svg") center / contain no-repeat;
	border: 0;
}

/* ---- Buttons ---- */
.mx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mx-space-2);
	min-height: 44px;
	padding: 0 var(--mx-space-5);
	border: 1px solid var(--mx-red);
	border-radius: var(--mx-radius);
	background: linear-gradient(180deg, #c8161f 0%, var(--mx-red) 55%, #8c0e15 100%);
	color: var(--mx-white) !important;
	font-family: var(--mx-font-display);
	font-size: var(--mx-text-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: box-shadow var(--mx-duration) var(--mx-ease), transform var(--mx-duration) var(--mx-ease), background var(--mx-duration) var(--mx-ease);
}
.mx-btn:hover { background: linear-gradient(180deg, #ef3341 0%, var(--mx-red-bright) 55%, #a3121b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--mx-glow-red); }
.mx-btn:active { transform: translateY(1px); background: var(--mx-red-deep); }
.mx-btn:focus-visible { outline: 2px solid var(--mx-white); outline-offset: 2px; }
.mx-btn--ghost {
	background: rgba(11, 11, 15, 0.6);
	border-color: var(--mx-silver);
	box-shadow: none;
}
.mx-btn--ghost:hover { background: rgba(181, 18, 27, 0.18); border-color: var(--mx-red-bright); box-shadow: var(--mx-glow-red); }
.mx-btn--sm { min-height: 34px; padding: 0 var(--mx-space-4); font-size: var(--mx-text-xs); }

/* ---- Panels ---- */
.mx-panel {
	position: relative;
	background: linear-gradient(180deg, rgba(28, 28, 36, 0.96) 0%, rgba(19, 19, 25, 0.96) 100%);
	border: 1px solid var(--mx-border);
	border-top: 2px solid var(--mx-red);
	border-radius: var(--mx-radius);
	box-shadow: var(--mx-shadow-panel);
	padding: var(--mx-space-5);
}
.mx-panel::before,
.mx-panel::after {
	content: "";
	position: absolute;
	top: -2px;
	width: 22px; height: 22px;
	background: url("../ornaments/corner.svg") center / contain no-repeat;
	pointer-events: none;
}
.mx-panel::before { left: -1px; }
.mx-panel::after { right: -1px; transform: scaleX(-1); }
.mx-panel__title {
	display: flex;
	align-items: center;
	gap: var(--mx-space-2);
	margin: 0 0 var(--mx-space-4);
	padding-bottom: var(--mx-space-3);
	border-bottom: 1px solid var(--mx-border);
	font-family: var(--mx-font-display);
	font-size: var(--mx-text-md);
	font-weight: 700;
	letter-spacing: var(--mx-tracking-display);
	text-transform: uppercase;
	color: var(--mx-white);
}
.mx-panel__title::before {
	content: "";
	width: 12px; height: 12px;
	flex: none;
	background: url("../ornaments/diamond.svg") center / contain no-repeat;
}

/* ---- Badges / status ---- */
.mx-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid var(--mx-border);
	font-size: var(--mx-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mx-silver);
}
.mx-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mx-badge--online { color: var(--mx-success); border-color: rgba(76, 195, 138, 0.4); }
.mx-badge--offline { color: var(--mx-red-text); border-color: var(--mx-border-accent); }

/* ---- Stats list ---- */
.mx-stats { display: grid; gap: var(--mx-space-2); margin: 0; }
.mx-stats > div { display: flex; justify-content: space-between; gap: var(--mx-space-3); padding: 6px 0; border-bottom: 1px dashed var(--mx-border); }
.mx-stats dt { color: var(--mx-text-faint); }
.mx-stats dd { margin: 0; color: var(--mx-white); font-weight: 600; text-align: right; }

/* ---- Subtle animation (respects reduced motion) ---- */
@keyframes mx-ember {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}
.mx-ember { animation: mx-ember 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.mx-ember { animation: none; }
	.mx-btn { transition: none; }
}