/* ---- 名片 (js/components/bizcard.js): a bank card's size and corners, two sides, turned round the upright axis ---- */

.bc {
	--bc-bg: #ffffff;
	--bc-ink: #111827;
	--bc-muted: #4b5563;
	--bc-faint: #9ca3af;
	--bc-dim: #0b1220; /* 工牌's clouds a shade down in the dark */
	position: relative;
	width: min(100%, 428px);
	aspect-ratio: 85.6 / 53.98;
	perspective: 1600px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* the codes black on white whatever the theme (what scanners read); also when one is shown big, out of the card */
.bc,
.bc-big-code {
	--bc-code-bg: #fff;
	--bc-code-ink: #000;
	--bc-code-text: #4b5563;
}

:root[data-theme="dark"] .bc {
	--bc-bg: #1f2633;
	--bc-ink: #f3f4f6;
	--bc-muted: #c3c8d1;
	--bc-faint: #7b8494;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bc {
		--bc-bg: #1f2633;
		--bc-ink: #f3f4f6;
		--bc-muted: #c3c8d1;
		--bc-faint: #7b8494;
	}
}

.bc:focus-visible {
	outline: none;
}

.bc:focus-visible .bc-face {
	box-shadow: 0 0 0 3px var(--focus-ring), var(--elev-2);
}

.bc-flip {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.bc.is-back .bc-flip {
	transform: rotateY(180deg);
}

/* the corners: 3.18 mm of 85.6 × 53.98 */
.bc-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-top-color: var(--edge-top);
	border-bottom-color: var(--edge-bottom);
	border-radius: 3.715% / 5.891%;
	background: var(--bc-bg);
	box-shadow: var(--edge-light), var(--elev-2);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* which side shows: the one it is turned to (turning, it changes half way round: components/bizcard.js turn) */
.bc-back {
	visibility: hidden;
	transform: rotateY(180deg);
}

.bc.is-back .bc-front {
	visibility: hidden;
}

.bc.is-back .bc-back {
	visibility: visible;
}

.bc-svg {
	display: block;
	width: 100%;
	height: 100%;
	/* the same letters at every size: Apple's system font picks its shapes by the size drawn, and a card flying in
	   small then landing changed its letters (iPad Safari, 2026-10-20) */
	font-optical-sizing: none;
}

.bc-bg {
	fill: var(--bc-bg);
}

.bc-name,
.bc-org,
.bc-ink {
	fill: var(--bc-ink);
}

.bc-muted {
	fill: var(--bc-muted);
}

.bc-faint {
	fill: var(--bc-faint);
}

.bc-line {
	fill: var(--border);
}

.bc-icon {
	color: var(--bc-faint);
}

.bc-band-text {
	fill: rgb(var(--shine) / 0.85);
}

/* 工牌: turned by 个人资料's button, not by a click on it */
.bc--badge {
	cursor: default;
}

.bc-letter {
	fill: var(--on-fill);
	font-weight: 600;
}

/* the codes stay black on white whatever the theme (what scanners read) */
.bc-code-bg {
	fill: var(--bc-code-bg);
}

.bc-code-ink {
	fill: var(--bc-code-ink);
}

.bc-code-text {
	fill: var(--bc-code-text);
}

/* 工牌's clouds in the dark: the same clouds a shade down (the picture saved stays light: its own style hides this) */
.bc-dim {
	fill: var(--bc-dim);
	fill-opacity: 0;
}

.bc-dim-g {
	fill: var(--bc-dim);
	opacity: 0;
}

:root[data-theme="dark"] .bc .bc-dim-g {
	opacity: 0.42;
}

:root[data-theme="dark"] .bc .bc-dim {
	fill-opacity: 0.42;
}

:root[data-theme="dark"] .bc .bc-rim {
	fill-opacity: 0.25;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bc .bc-dim {
		fill-opacity: 0.42;
	}

	:root:not([data-theme="light"]) .bc .bc-dim-g {
		opacity: 0.42;
	}

	:root:not([data-theme="light"]) .bc .bc-rim {
		fill-opacity: 0.25;
	}
}

.bc-code {
	cursor: zoom-in;
}

.bc-code:focus {
	outline: none;
}

.bc-code:focus-visible .bc-code-bg {
	stroke: var(--focus-ring);
	stroke-width: 4;
}

.bc-logo-dark,
.bc-night {
	display: none;
}

:root[data-theme="dark"] .bc .bc-logo-light,
:root[data-theme="dark"] .bc .bc-day {
	display: none;
}

:root[data-theme="dark"] .bc .bc-logo-dark,
:root[data-theme="dark"] .bc .bc-night {
	display: inline;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bc .bc-logo-light,
	:root:not([data-theme="light"]) .bc .bc-day {
		display: none;
	}

	:root:not([data-theme="light"]) .bc .bc-logo-dark,
	:root:not([data-theme="light"]) .bc .bc-night {
		display: inline;
	}
}

/* 个人资料's picture (a button of AI 助手's) where the card's picture is (its place: bizcard.js FACE, set inline) */
.bc-face-slot {
	position: absolute;
	aspect-ratio: 1;
	container-type: inline-size;
}

.bc-face-slot > *,
.bc-face-slot .avatar {
	width: 100% !important;
	height: 100% !important;
}

.bc-face-slot .avatar {
	font-size: 45cqi !important;
}

/* that it turns: a small mark in the corner */
.bc-turn {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	padding: 4px;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--edge-light), var(--elev-1);
	color: var(--faint);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-quick);
}

.bc:hover .bc-turn,
.bc:focus-visible .bc-turn {
	opacity: 1;
}

@media (hover: none) {
	.bc-turn {
		opacity: 1;
	}
}

/* a code shown large */
.bc-big {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 6px 4px 4px;
	text-align: center;
}

.bc-big-code {
	width: min(300px, 70vw);
	height: auto;
}

.bc-big .bc-code {
	cursor: default;
}