/**
 * Section 3: Exceptions — "Decide the exceptions"
 * Figma  desktop 4435:4260 · laptop 4435:8028 · mobile 4435:23651
 * Trạng thái: Before 4435:12412 · After 4435:12463 (design elements 4435:12411)
 *
 * Trạng thái điều khiển bằng class .is-after trên <section> (scripts.js).
 *
 * Màu trạng thái KHÔNG có token trong Figma lẫn global.css → ghi cứng, hex lấy mẫu
 * pixel từ screenshot 1:1 của node 4435:4270 (Before) / 4435:12473 (After):
 *   xanh lá  #68D37F  — toggle After, số $218, chú thích After
 *   đỏ       #FF4E41  — thanh + pill Signups (trùng token 1st-brd)
 *   cam      #FB9129  — thanh + pill Orders
 *   tím      #CC6AF9  — thanh + pill Commission (trùng token 2nd-brd)
 *   nền pill After = màu trạng thái alpha .24 trên #050505 (đo: #411713 / #40270E / #351D40)
 *   viền card / vòng số / vạch ngăn  #232323 (đo 1px ở biên nửa pixel → #141414 ×2)
 *   thanh nền #4A4949 (= stroke) · pill Before #333 (= 3rd-bg)
 */

#fd-exceptions {
	--fd-exc-green: #68d37f;
	--fd-exc-red: #ff4e41;
	--fd-exc-orange: #fb9129;
	--fd-exc-purple: #cc6af9;
	--fd-exc-line: #232323;
	--fd-exc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fd-exc-dur: 480ms;
}

/* ============================================================
   Heading: section-headings 127 + 60 + toggle 56 (mobile 160 + 60 + 43)
   ============================================================ */
.fd-exceptions__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 60 — Figma heading/div y=187 = 127 + 60 (mobile 220 = 160 + 60) */
	gap: var(--var-60);
}

/* Cột flex căn giữa làm .fd-headings co theo nội dung (heading 800 tràn ở mobile)
   → kéo full bề rộng để max-width: 100% của heading/description có tác dụng. */
.fd-exceptions__head > .fd-headings {
	align-self: stretch;
}

/* Toggle 240×56: "Before" 63 + 12 + toggle 104 + 12 + "After" 49 */
.fd-exceptions__switch {
	display: flex;
	align-items: center;
	gap: var(--var-12);
}

/* headings/heading-6 — DM Sans 600, lh 115% (20 / mobile 18) */
.fd-exceptions__switch-label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h6);
	line-height: 1.15;
	color: var(--color-reverse-fg);
	cursor: pointer;
	user-select: none;
}

/* Bề rộng hộp chữ Figma (63 / 49, mobile 57 / 45) — giữ toggle đúng tâm khi font
   web hẹp hơn Figma chút ít; chữ dài hơn (bản dịch) vẫn tự giãn. */
.fd-exceptions__switch-label[data-fd-exc-set="before"] { min-width: 63px; }
.fd-exceptions__switch-label[data-fd-exc-set="after"]  { min-width: 49px; }

.fd-exceptions__toggle {
	position: relative;
	flex: none;
	width: 104px;
	height: 56px;
	border-radius: 100px;
	background: #333333; /* 3rd-bg */
	transition: background-color var(--fd-exc-dur) var(--fd-exc-ease);
}

.fd-exceptions__toggle:focus-visible {
	outline: 2px solid var(--color-reverse-fg);
	outline-offset: 3px;
}

/* dot Ø40 tại (8, 8) — After: x=56 */
.fd-exceptions__toggle-dot {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-reverse-fg);
	transition: transform var(--fd-exc-dur) var(--fd-exc-ease);
}

.is-after .fd-exceptions__toggle {
	background: var(--fd-exc-green);
}

.is-after .fd-exceptions__toggle-dot {
	transform: translateX(48px);
}

/* ============================================================
   Thân: ảnh 680 + 40 + cột text (căn giữa dọc)
   ============================================================ */
.fd-exceptions__body {
	display: flex;
	align-items: center;
	gap: var(--var-40);
}

/* Desktop 680×680 · laptop 616×680 (Figma 4435:8038 không còn vuông) */
.fd-exceptions__media {
	position: relative;
	flex: 0 0 auto;
	width: 680px;
	max-width: calc((100% - var(--var-40)) / 2);
	height: 680px;
	overflow: hidden;
	isolation: isolate;
	background: var(--color-reverse-bg);
}

/* nền gradient 1280×720, cover + căn giữa.
   Before = bg-dark ở opacity .5 trên 1st-bg (fit tuyến tính pixel: b ≈ .5·ảnh + 2.5,
   lệch TB 0.75/255) · After = bg-mid opacity 1 (lệch TB 1.6/255). */
.fd-exceptions__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transition: opacity var(--fd-exc-dur) var(--fd-exc-ease);
}

.fd-exceptions__bg--before {
	opacity: .5;
}

.fd-exceptions__bg--after,
.is-after .fd-exceptions__bg--before {
	opacity: 0;
}

.is-after .fd-exceptions__bg--after {
	opacity: 1;
}

.fd-exceptions__list {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--var-48);
}

.fd-exceptions__item {
	display: flex;
	flex-direction: column;
	gap: var(--var-6);
}

/* label/LABEL-MD-CAP 14 (mobile 12), màu 2nd-fg */
.fd-exceptions__item-label {
	color: rgba(255, 255, 255, .8);
}

/* headings/heading-3 — base.css chưa có .fd-heading--h3 nên đặt size tại đây */
.fd-exceptions__item-title {
	font-size: var(--fs-h3);
}

/* ============================================================
   Swap Before / After: 2 bản chồng nhau cùng ô grid → khung giữ cao = bản dài
   hơn, không nhảy layout khi đổi.
   ============================================================ */
.fd-exceptions__item-title,
.fd-exc-card__pill,
.fd-exc-card__caption {
	display: grid;
}

.fd-exc-swap {
	grid-area: 1 / 1;
	transition:
		opacity var(--fd-exc-dur) var(--fd-exc-ease),
		visibility 0s linear var(--fd-exc-dur);
}

.fd-exc-swap--after,
.is-after .fd-exc-swap--before {
	opacity: 0;
	visibility: hidden;
}

.is-after .fd-exc-swap--after {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ============================================================
   Card mock — Figma 4435:4271: 510×298, viền 1, radius 18, nền 1st-bg.
   Kích thước viết theo desktop; tablet/mobile thu bằng transform scale
   (Figma mobile 4435:23662 = đúng ½ desktop, trừ dòng số).
   ============================================================ */
.fd-exc-card {
	--fd-exc-scale: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 510px;
	transform: translate(-50%, -50%) scale(var(--fd-exc-scale));
	border: 1px solid var(--fd-exc-line);
	border-radius: var(--var-18);
	background: var(--color-reverse-bg);
	color: var(--color-reverse-fg);
}

/* đầu card 508×85: 24 + số 37 + 24; số | 6 | chú thích, căn giữa */
.fd-exc-card__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	padding-block: var(--var-24);
}

/* headings-number/heading-4: Konstant Grotesk Book 32, lh 115% */
.fd-exc-card__amount {
	font-size: 32px; /* h4 desktop — không dùng --fs-h4 vì mobile global hạ 22 */
	font-variant-numeric: tabular-nums;
	transition: color var(--fd-exc-dur) var(--fd-exc-ease);
}

/* "paid out this week" 121×16 → 14 / lh 115%; Before ~60% trắng, After trắng */
.fd-exc-card__amount-note {
	font-size: 14px;
	line-height: 1.15;
	color: rgba(255, 255, 255, .6);
	transition: color var(--fd-exc-dur) var(--fd-exc-ease);
}

.is-after .fd-exc-card__amount {
	color: var(--fd-exc-green);
}

.is-after .fd-exc-card__amount-note {
	color: var(--color-reverse-fg);
}

/* thân 508×211: vạch 1 + 23 + 3 dòng (30, gap 18) + 18 + chú thích 19 + 24 */
.fd-exc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--var-18);
	padding: 23px var(--var-18) var(--var-24);
	border-top: 1px solid var(--fd-exc-line);
}

.fd-exc-card__rows {
	display: flex;
	flex-direction: column;
	gap: var(--var-18);
}

/* dòng 472×30: số 30 | 12 | nhãn 100 | 12 | thanh 166 | 12 | pill 140 */
.fd-exc-card__row {
	display: flex;
	align-items: center;
	gap: var(--var-12);
	height: 30px;
}

.fd-exc-card__index {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--fd-exc-line);
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	color: rgba(255, 255, 255, .8); /* 2nd-fg */
}

.fd-exc-card__label {
	flex: 0 0 100px;
	font-size: 14px;
	line-height: 1;
	color: rgba(255, 255, 255, .6);
}

/* thanh 166×12 nền stroke; After: đoạn màu 60 ở cuối (x 106→166), chạy từ trái */
.fd-exc-card__bar {
	position: relative;
	flex: 0 0 166px;
	height: 12px;
	border-radius: 6px;
	background: var(--color-reverse-stroke);
	overflow: hidden;
}

.fd-exc-card__bar-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	background: var(--fd-exc-tone);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fd-exc-dur) var(--fd-exc-ease);
}

.is-after .fd-exc-card__bar-fill {
	transform: scaleX(1);
}

/* stagger nhẹ cho 3 thanh */
.fd-exc-card__row:nth-child(2) .fd-exc-card__bar-fill { transition-delay: 60ms; }
.fd-exc-card__row:nth-child(3) .fd-exc-card__bar-fill { transition-delay: 120ms; }

/* pill 140×30, radius full; Before nền 3rd-bg chữ 2nd-fg; After viền + nền màu .24 */
.fd-exc-card__pill {
	flex: 0 0 140px;
	place-items: center;
	height: 30px;
	border-radius: 100px;
	background: #333333; /* 3rd-bg */
	box-shadow: inset 0 0 0 1px transparent;
	/* 600: bề rộng chữ Figma "214 blocked" 80 / "Waiting for you" 102 khớp 600 (500 hụt 2-3px) */
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
	transition:
		background-color var(--fd-exc-dur) var(--fd-exc-ease),
		box-shadow var(--fd-exc-dur) var(--fd-exc-ease),
		color var(--fd-exc-dur) var(--fd-exc-ease);
}

.fd-exc-card__row--red    { --fd-exc-tone: var(--fd-exc-red);    --fd-exc-tone-bg: rgba(255, 78, 65, .24); }
.fd-exc-card__row--orange { --fd-exc-tone: var(--fd-exc-orange); --fd-exc-tone-bg: rgba(251, 145, 41, .24); }
.fd-exc-card__row--purple { --fd-exc-tone: var(--fd-exc-purple); --fd-exc-tone-bg: rgba(204, 106, 249, .24); }

.is-after .fd-exc-card__pill {
	background: var(--fd-exc-tone-bg);
	box-shadow: inset 0 0 0 1px var(--fd-exc-tone);
	color: var(--fd-exc-tone);
}

/* chú thích: icon 18 | 6 | chữ 16 / 19 — Before đỏ + chữ 60% trắng, After xanh lá 80% */
.fd-exc-card__caption {
	justify-items: center;
	font-size: 16px;
	line-height: 19px;
	color: rgba(255, 255, 255, .6);
}

.fd-exc-card__caption .fd-exc-swap {
	display: flex;
	align-items: center;
	gap: var(--var-6);
}

.fd-exc-card__caption .fd-exc-swap--after {
	color: rgba(104, 211, 127, .8);
}

.fd-exc-card__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--fd-exc-red);
}

.fd-exc-swap--after .fd-exc-card__icon {
	color: var(--fd-exc-green);
}

/* ============================================================
   Tablet + mobile (≤1024): xếp dọc, ảnh vuông.
   Mobile 390: ảnh 350×350, card ½ (255×143). Tablet 834: ảnh giới hạn 500 căn
   giữa (không có frame Figma — ảnh full 794 làm card mock to quá cỡ chữ đọc).
   ============================================================ */
@media (max-width: 1024px) {
	.fd-exceptions__switch-label[data-fd-exc-set="before"] { min-width: 57px; }
	.fd-exceptions__switch-label[data-fd-exc-set="after"]  { min-width: 45px; }

	/* toggle 80×43.08, dot 30.77 tại 6.15 (≈ 0.77× desktop) */
	.fd-exceptions__toggle {
		width: 80px;
		height: 43.08px;
	}

	.fd-exceptions__toggle-dot {
		top: 6.15px;
		left: 6.15px;
		width: 30.77px;
		height: 30.77px;
	}

	.is-after .fd-exceptions__toggle-dot {
		transform: translateX(36.92px);
	}

	.fd-exceptions__body {
		flex-direction: column;
		align-items: stretch;
	}

	.fd-exceptions__media {
		width: 100%;
		max-width: 500px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
	}

	/* scale = bề rộng ảnh / 700 (350 → .5 đúng Figma); scripts.js cập nhật theo
	   bề rộng thật, giá trị dưới là fallback khi chưa có JS */
	.fd-exc-card {
		--fd-exc-scale: .5;
	}

	/* Figma mobile: số 51×13 → ~11px (½ desktop sẽ là 16) → đặt 22 trước khi scale ½ */
	.fd-exc-card__amount {
		font-size: 22px;
	}

	/* cột text cùng bề rộng + căn cùng mép với ảnh (tablet 500; mobile = 350 full) */
	.fd-exceptions__list {
		flex: none;
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}
}