/**!
 * @file LevelsPage.css
 * @desc Levels Explained page (esl_levels.php): the six-level table (CEFR band + Eiken pills, name, meaning) and the
 *       Eiken note. Everything else uses the About page's styles (AboutPage.css, body.about-page).
 *       Pills are the same teal / pale-teal pair as the level on lesson cards (.lesson-card-level__band / __eiken).
 * @version v7 2026-11-14 - Initial version.
 * @author Charlie Samra <charles@samraworld.net>
 * @see esl_levels.php, AboutPage.css, sw_common.css (.lesson-card-level)
 */

/* One row per level: the badges on the left, a fixed column so the names line up; the name and meaning beside it. */
body.levels-page .lv-scale {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 820px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body.levels-page .lv-scale__row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 18px;
	align-items: start;
	padding: 16px 20px;
	border-radius: var(--ab-radius-sm);
	background: var(--ab-brand-tint);
	border: 1px solid var(--ab-border);
}
body.levels-page .lv-scale__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
}
body.levels-page .lv-scale__band {
	padding: 1px 12px;
	border-radius: 999px;
	background: var(--brand-fill, #007d80);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.5;
}
body.levels-page .lv-scale__eiken {
	padding: 1px 10px;
	border-radius: 999px;
	background: #e6f4f4;
	color: var(--on-tint, #0b2a66);
	font-weight: 600;
	font-size: var(--fs-secondary);
	line-height: 1.6;
	white-space: nowrap;
}
body.levels-page .lv-scale__name {
	margin: 0 0 2px;
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--ab-ink);
}
body.levels-page .lv-scale__meaning {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--ab-ink-soft);
}

body.levels-page .lv-note {
	max-width: 820px;
	margin: 16px auto 0;
	font-size: var(--fs-secondary);
	color: var(--text-faint, #4f5b6b);
}
body.levels-page .lv-note i { color: var(--brand-accent, #ff4f5e); margin-right: 4px; }

/* "Where you'll see levels": a short icon band, not the About page's tall picture box (kept the phone page short). */
body.levels-page .ab-feature__icon { aspect-ratio: auto; height: 84px; }

/* "Where should I start?" is a heading and a paragraph only: no gap under it. */
body.levels-page .ab-section__head:last-child { margin-bottom: 0; }

/* Phones: the badges sit above the name and meaning. */
@media (max-width: 600px) {
	body.levels-page .lv-scale__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 14px 16px;
	}
}