/*
 * Medlemskortet: the login/profile room. Loaded only by the account
 * templates, so removing those pages removes the whole look.
 */

.medlemskortet {
	/* The card palette is scheme-invariant: a laminated card looks the
	   same on any desk, so the dark block below leaves these alone. */
	--mk-navy: #24344f;
	--mk-navy-deep: #16233a;
	--mk-gold: #d4a853;
	--mk-card-text: #f2e7c8;
	--mk-card-muted: #b9c2d4;
	--mk-photo-bg: rgba(255, 255, 255, 0.1);
	/* Shared by the card and the login form so they read as one column. */
	--mk-column: 22em;
	--mk-desk: #e9e7e2;
	--color-accent: var(--mk-navy);
	--color-link: var(--mk-navy);
	--color-link-hover: var(--mk-navy-deep);
	padding: 1.5em 1.25em 2em;
	border-radius: var(--radius-card);
	background: var(--mk-desk);
}

@media (prefers-color-scheme: dark) {
	.medlemskortet {
		--mk-desk: #17140f;
		--color-accent: var(--mk-gold);
		--color-link: var(--mk-gold);
		--color-link-hover: #e8c070;
	}
}

.mk-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75em;
	max-width: var(--mk-column);
	/* ID-1 card proportions (85.6 × 54 mm). */
	aspect-ratio: 1.586;
	margin: 0 auto;
	padding: 1.1em 1.2em 1em;
	border-radius: var(--radius-card);
	color: var(--mk-card-text);
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0 32%, transparent 32.5%),
		linear-gradient(160deg, var(--mk-navy), var(--mk-navy-deep));
	box-shadow: 0 8px 20px rgba(10, 20, 40, 0.35);
}

.mk-club {
	color: var(--mk-gold);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.mk-identity {
	display: flex;
	align-items: center;
	gap: 0.9em;
}

.mk-photo {
	flex-shrink: 0;
	width: 3.6em;
	height: 3.6em;
	border-radius: var(--radius-small);
	object-fit: cover;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.mk-name {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.15em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.mk-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	color: var(--mk-card-muted);
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Login */
.mk-login {
	max-width: var(--mk-column);
	margin: 1.5em auto 0;
}

.mk-login .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	margin-top: 1.1em;
}

/* Paperwork on the desk */
.mk-paper {
	padding: 1em 1.25em 1.25em;
	border-radius: var(--radius-card);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.mk-paper h1,
.mk-paper h2 {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* A sheet title, not a panel label: it must outrank the 0.9em field
   labels below it. */
.mk-paper h1 {
	font-size: 0.95em;
}

.mk-paper input[type="file"] {
	display: block;
	width: 100%;
	font-size: 0.9em;
}

.mk-sheet {
	max-width: 24em;
	margin: 0 auto;
}

.mk-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	align-items: start;
	margin-top: 1.25em;
}

.mk-actions {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-top: 1em;
}

/* display: contents lifts the buttons out of their form wrappers so
   both actions are flex items and render at the same height. */
.mk-actions form {
	display: contents;
}

.mk-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

@media (max-width: 600px) {
	.medlemskortet {
		padding: 1.25em 1em 1.5em;
	}

	.mk-grid {
		grid-template-columns: 1fr;
	}
}