/* Current design chooser, layered on the legacy corporate and game styles. */
.mt-design-trigger {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--mt-accent);
	background: var(--mt-accent);
	color: var(--mt-accent-contrast);
	font: inherit;
	font-size: .84rem;
	font-weight: 800;
	letter-spacing: .03em;
	cursor: pointer;
}

.mt-design-trigger--floating {
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 10000;
}

.mt-design-dialog {
	position: fixed;
	inset: 0;
	z-index: 10002;
	width: min(780px, calc(100% - 32px));
	max-width: none;
	max-height: min(760px, calc(100dvh - 48px));
	margin: auto;
	padding: 0;
	border: 1px solid var(--mt-border);
	border-radius: 10px;
	background: var(--mt-surface);
	color: var(--mt-text);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
	overflow: auto;
}

.mt-design-dialog::backdrop,
.mt-design-dialog-fallback-backdrop { background: rgba(5, 11, 20, .62); }
.mt-design-dialog-fallback-backdrop { position: fixed; inset: 0; z-index: 10001; width: 100%; height: 100%; border: 0; }
.mt-design-dialog-fallback-backdrop[hidden] { display: none; }
.mt-design-dialog__panel { padding: 28px; }
.mt-design-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mt-design-dialog__eyebrow { margin: 0 0 4px; color: var(--mt-muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mt-design-dialog h2 { margin: 0; color: var(--mt-text); font-size: clamp(1.45rem, 4vw, 2rem); }
.mt-design-dialog__header p:last-child { margin: 8px 0 0; color: var(--mt-muted); line-height: 1.7; }
.mt-design-dialog__close { min-height: 44px; padding: 0 14px; border: 1px solid var(--mt-border); background: transparent; color: var(--mt-text); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mt-design-dialog__group { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.mt-design-dialog__group legend { margin-bottom: 10px; color: var(--mt-text); font-weight: 800; }
.mt-design-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mt-design-option { position: relative; min-height: 64px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--mt-border); background: var(--mt-surface-2); cursor: pointer; }
.mt-design-option:has(input:checked) { border-color: var(--mt-accent); box-shadow: inset 0 0 0 1px var(--mt-accent); }
.mt-design-option input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.mt-design-swatch { position: relative; width: 52px; height: 44px; display: block; border: 1px solid rgba(0, 0, 0, .16); background: #182230; overflow: hidden; }
.mt-design-swatch::after { position: absolute; inset: 9px; border: 2px solid currentColor; content: ""; }
.mt-design-swatch--corp { color: #1764aa; background: #edf5fb; }
.mt-design-swatch--game { color: #45e1ff; background: #0d1022; }
.mt-design-swatch--toraya { color: #8c2f2f; background: #eee4d2; }
.mt-design-swatch--note { color: #287a6c; background: #fffdf7; }
.mt-design-swatch--aman { color: #a78b67; background: #262523; }
.mt-design-swatch--balmuda { color: #333; background: #f4f4f4; }
.mt-design-swatch--game::after { transform: rotate(45deg); }
.mt-design-swatch--toraya::after { border-radius: 50%; }
.mt-design-swatch--note::after { border-width: 0 0 2px; }
.mt-design-swatch--aman::after { inset: 7px 15px; }
.mt-design-swatch--balmuda::after { inset: 13px 9px; }
.mt-design-option__copy { min-width: 0; display: grid; gap: 2px; }
.mt-design-option__copy strong { color: var(--mt-text); font-size: .92rem; }
.mt-design-option__copy small { color: var(--mt-muted); font-size: .78rem; }
.mt-design-trigger:focus-visible, .mt-design-dialog button:focus-visible, .mt-design-dialog input:focus-visible + span { outline: 3px solid var(--mt-accent-bright); outline-offset: 3px; }
body.mt-switcher-open { overflow: hidden; }

@media (max-width: 700px) {
	.mt-design-trigger--floating { top: 10px; right: 10px; }
	.mt-design-dialog { width: 100%; max-height: min(88dvh, 760px); margin: auto 0 0; border-width: 1px 0 0; }
	.mt-design-dialog__panel { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
	.mt-design-options { grid-template-columns: 1fr; }
}
