/*
 * IELTS Drill — Story B: chapter 03 (band) and chapter 04 (fix).
 * Pattern: patterns/story-b.php. Source: src/features/landing/landing-page.tsx
 * (<section data-kind="band"> and <section data-kind="fix">).
 *
 * The chapter shell (.id-ch, .id-ch__rail/__node/__body, .id-eyebrow,
 * .id-ch__title, .id-ch__lede) lives in base.css. This file only styles the
 * two right-hand graphics, which have no wide/xl variants in the TSX.
 *
 * Every rule below is the finished state. assets/js/landing.js writes, inline:
 *   .id-band / .id-fix (data-gfx)  transform, opacity
 *   .id-band__fill (data-fill)     width
 *   .id-band__num/__val (data-count) text only
 *   .id-fix__w (data-tw)           background, color
 *   .id-fix__corr (data-corr)      opacity, transform
 * so none of those properties is set here beyond the finished values.
 */

/* ---------------------------------------------------------------------------
 * Chapter 03 — the band score card (data-ref="band")
 * ------------------------------------------------------------------------ */
.id-band {
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(9, 20, 40, 0.05), 0 40px 80px -56px rgba(9, 20, 40, 0.45), inset 0 0 0 1px rgba(9, 20, 40, 0.06);
	padding: clamp(22px, 3vw, 32px);
}
.id-band__head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.id-band__tag {
	padding: 6px 12px;
	border-radius: 999px;
	background: #F1ECFA;
	color: #6D3FCB;
	font-size: 12px;
	font-weight: 800;
}
.id-band__meta {
	font-size: 13px;
	font-weight: 600;
	color: #586A87;
}
.id-band__total {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.id-band__num {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.id-band__of {
	font-size: 13px;
	font-weight: 700;
	color: #586A87;
}
.id-band__rule {
	height: 1px;
	background: #EDF2FA;
	margin: 20px 0 22px;
}
.id-band__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.id-band__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 14px;
	align-items: center;
}
.id-band__name {
	font-size: 14px;
	font-weight: 700;
	color: #0B1120;
}
.id-band__val {
	font-family: 'Geist Mono', monospace;
	font-size: 15px;
	font-weight: 600;
}
.id-band__track {
	grid-column: 1 / -1;
	position: relative;
	height: 10px;
	border-radius: 5px;
	background: #EDF2FA;
	overflow: hidden;
}
/* Width is per instance (inline style="width:N%", the engine's finished value). */
.id-band__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 5px;
}

/* Criterion tones: bar colour (col) and score ink (ink) from the TSX `crit` array. */
.id-band__row--warn .id-band__val {
	color: #8A5600;
}
.id-band__row--warn .id-band__fill {
	background: #E9A23B;
}
.id-band__row--good .id-band__val {
	color: #0A6E48;
}
.id-band__row--good .id-band__fill {
	background: #2FA36B;
}
.id-band__row--blue .id-band__val {
	color: #1259BD;
}
.id-band__row--blue .id-band__fill {
	background: #1668D9;
}

/* ---------------------------------------------------------------------------
 * Chapter 04 — the marked-up transcript (data-ref="transWrap")
 * ------------------------------------------------------------------------ */
.id-fix {
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(9, 20, 40, 0.05), 0 40px 80px -56px rgba(9, 20, 40, 0.45), inset 0 0 0 1px rgba(9, 20, 40, 0.06);
	padding: clamp(22px, 3vw, 32px);
}
.id-fix__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.id-fix__mic {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F1ECFA;
	display: grid;
	place-items: center;
}
.id-fix__mic > span {
	width: 7px;
	height: 11px;
	border-radius: 4px;
	background: #6D3FCB;
}
.id-fix__label {
	font-size: 13px;
	font-weight: 700;
	color: #586A87;
}
.id-fix__time {
	margin-left: auto;
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	color: #586A87;
}

/* The transcript <p data-ref="trans">. */
.id-fix__trans {
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.8;
	margin: 16px 0 0;
	color: #0B1120;
}
/* One word (data-tw). Plain words: transparent on ink. */
.id-fix__w {
	border-radius: 6px;
	padding: 2px 2px;
	background: transparent;
	color: #0B1120;
	transition: background .35s ease, color .35s ease;
}
/* Finished highlights (TSX HL): p = pause, t = tense, g = good. */
.id-fix__w--p {
	background: #FBE3E3;
	color: #AE2126;
}
.id-fix__w--t {
	background: #DCE8FB;
	color: #1259BD;
}
.id-fix__w--g {
	background: #DDF2E7;
	color: #0A6E48;
}

/* Corrections (data-corr). */
.id-fix__corrs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.id-fix__corr {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 12px;
	background: #F7F9FD;
	box-shadow: inset 0 0 0 1px rgba(9, 20, 40, 0.06);
	font-size: 14px;
	font-weight: 700;
}
.id-fix__was {
	color: #AE2126;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}
.id-fix__arrow {
	color: #586A87;
}
.id-fix__now {
	color: #0A6E48;
}

/* Legend. */
.id-fix__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 18px;
	padding-top: 16px;
	box-shadow: 0 -1px 0 #EDF2FA;
	font-size: 13px;
	font-weight: 700;
	color: #4E5F7C;
}
.id-fix__key {
	display: flex;
	align-items: center;
	gap: 7px;
}
.id-fix__swatch {
	width: 12px;
	height: 12px;
	border-radius: 4px;
}
.id-fix__swatch--p {
	background: #FBE3E3;
}
.id-fix__swatch--t {
	background: #DCE8FB;
}
.id-fix__swatch--g {
	background: #DDF2E7;
}