/*
 * CFU Blocks: front-end styles (0.3.0). Loaded only on pages that use the plugin's blocks, block styles or formats
 * (CFU_Blocks_Plugin), after the theme's and LearnDash's stylesheets. The design is docs/mockups/ (approved
 * 2026-11-03); this file is its part 1 ("proposed block styles") ported to the real block markup:
 *
 * - core block styles print as is-style-<name> (registered in the editor: src/editor/styles.ts);
 * - .cfu-lesson is the plugin's wrapper around the content of lessons, practice pages and quizzes that use our
 *   blocks (CFU_Blocks_Plugin::wrap_content()); only the body rhythm needs it, every block style works without it;
 * - component internals use two classes (.cfu-x .cfu-x__part) so they beat LearnDash's ".ld-focus-content h3".
 *
 * Units (global CSS rules): font sizes in rem; vertical gaps around text in rem (em inside small components);
 * horizontal padding that competes with text on phones, borders and radii in px. No uppercase, no letter-spacing.
 */

:root {
	/* Spacing by relationship (not by size), so one uniform gap cannot creep in. */
	--cfu-c-related: 0.5rem;   /* heading -> its own text, label -> value */
	--cfu-c-group: 1rem;       /* paragraphs and items inside one block */
	--cfu-c-block: 1.75rem;    /* block -> next block inside a section */
	--cfu-c-section: 3rem;     /* above a section header */

	/* Chinese text: system CJK faces (Inter has no CJK glyphs); Simplified Chinese first so no Japanese glyph forms. */
	--cfu-c-zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;

	--cfu-c-ink: var(--stone-900, #1c1917);
	--cfu-c-text: var(--stone-700, #44403c);
	--cfu-c-muted: var(--stone-600, #57534e);      /* 7.0:1 on white */
	--cfu-c-faint: var(--stone-500, #78716c);      /* 4.8:1 on white: pinyin, meta */
	--cfu-c-line: var(--stone-200, #e7e5e4);
	--cfu-c-soft: var(--stone-50, #fafaf9);
	--cfu-c-blue: #0966fb;                          /* brand primary, 4.9:1 on white */
	--cfu-c-blue-soft: #eff6ff;
}

/* ---------- Lesson body rhythm (lessons, practice pages, quizzes: the .cfu-lesson wrapper) ---------- */
.cfu-lesson {
	color: var(--cfu-c-text);
	font-size: 1rem;
	line-height: 1.65;
}

.cfu-lesson > p,
.cfu-lesson > ul,
.cfu-lesson > ol {
	margin: 0 0 var(--cfu-c-group);
}

.cfu-lesson > ul.wp-block-list:not(.is-style-examples),
.cfu-lesson > ol.wp-block-list:not(.is-style-examples),
.cfu-step__body ul.wp-block-list:not(.is-style-examples),
.cfu-step__body ol.wp-block-list:not(.is-style-examples) {
	padding-left: 1.5rem;
}

.cfu-lesson > ul.wp-block-list:not(.is-style-examples) > li + li,
.cfu-lesson > ol.wp-block-list:not(.is-style-examples) > li + li {
	margin-top: 0.25rem;
}

.cfu-lesson :is(strong, b) {
	color: var(--cfu-c-ink);
}

/* Bold or highlighted text inside a link keeps the link's colour (and its hover colour). <strong><a> needs nothing:
   the link sets its own colour. */
.cfu-lesson a :is(strong, b),
a mark.cfu-highlight {
	color: inherit;
}

/* Chinese wherever our blocks know the language (a 中文 tab, a Chinese table column, the "Chinese" format). Scoped to
   our own wrappers (audit L3): another plugin's or the theme's lang="zh" elements keep their own face. */
.cfu-tabs [lang|="zh"],
.cfu-table [lang|="zh"],
.cfu-zh {
	font-family: var(--cfu-c-zh);
}

/* Pinyin is Latin text: it keeps the body face even inside a Chinese-language block. */
.cfu-tabs [lang|="zh"][lang*="Latn"],
.cfu-table [lang|="zh"][lang*="Latn"] {
	font-family: var(--bs-body-font-family);
}

/* ---------- Format: Highlight (brand blue, weight 600) ---------- */
mark.cfu-highlight {
	padding: 0;
	background: transparent;
	color: var(--cfu-c-blue);
	font-weight: 600;
}

/* ---------- Heading style "Intro title" (h2 at the top of the lesson; the page already has the h1) ---------- */
.cfu-lesson > h2.is-style-intro,
h2.wp-block-heading.is-style-intro {
	margin: var(--cfu-c-block) 0 var(--cfu-c-related);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cfu-c-ink);
}

.cfu-lesson > .cfu-type-badge + h2.is-style-intro,
.cfu-lesson > h2.is-style-intro:first-child {
	margin-top: 0;
}

/* ---------- Heading style "Section" (h2: Vocabulary, Grammar, Expressions, Transcript, Questions ...) ---------- */
/* The rule under it replaces the separators that used to follow every header. */
.wp-block-heading.is-style-section {
	position: relative;
	margin: var(--cfu-c-section) 0 1.25rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--cfu-c-line);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cfu-c-ink);
	scroll-margin-top: 5rem;       /* jump links land below the phone top bar */
}

.wp-block-heading.is-style-section::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 32px;
	height: 2px;
	background: var(--cfu-c-blue);
}

/* ---------- Separator (core/separator: one look) ---------- */
.cfu-lesson hr,
hr.wp-block-separator {
	height: 0;
	margin: var(--cfu-c-block) 0;
	border: 0;
	border-top: 1px solid var(--cfu-c-line);
	opacity: 1;
}

/* ---------- Heading style "Grammar point" (h3) and the HSK tag format ---------- */
h3.wp-block-heading.is-style-grammar {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cfu-c-ink);
}

.wp-block-heading.is-style-section + h3.wp-block-heading.is-style-grammar {
	margin-top: 0;
}

.cfu-hsk-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0.125em 0.5em;
	border-radius: 6px;
	background: var(--cfu-c-blue-soft);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	color: #0750c4;            /* 6.8:1 on blue-50 */
	vertical-align: 0.2em;
	white-space: nowrap;
}

/* ---------- Heading style "Pattern" (h4) and the plain h4 above it (the pattern's label) ---------- */
h4.wp-block-heading.is-style-pattern {
	margin: 1.25rem 0 0.75rem;
	padding: 0.625rem 14px;
	border-radius: 8px;
	background: var(--cfu-c-blue-soft);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cfu-c-ink);
}

.cfu-lesson > h4.wp-block-heading:not([class*="is-style-"]) {
	margin: 1.75rem 0 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--cfu-c-ink);
}

.cfu-lesson > h4.wp-block-heading:not([class*="is-style-"]) + h4.wp-block-heading.is-style-pattern {
	margin-top: 0.5rem;
}

/* ---------- List style "Examples" (pinyin / 汉字 / English, as the content already writes them) ---------- */
/* Each item is "pinyin<br><strong>汉字</strong><br><em>English</em>": the bare text is the pinyin line, so the item
   itself is styled as pinyin and the strong / em lines override it. No content change needed. */
.wp-block-list.is-style-examples {
	display: grid;
	gap: 1.125rem;
	margin: 0 0 var(--cfu-c-block);
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-examples > li {
	position: relative;
	padding-left: 18px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cfu-c-faint);
}

.wp-block-list.is-style-examples > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--stone-300, #d6d3d1);
}

ol.wp-block-list.is-style-examples {
	counter-reset: cfu-ex;
}

ol.wp-block-list.is-style-examples > li {
	padding-left: 32px;
	counter-increment: cfu-ex;
}

ol.wp-block-list.is-style-examples > li::before {
	content: counter(cfu-ex);
	top: 0.15em;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	display: grid;
	place-items: center;
	background: var(--stone-100, #f5f5f4);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cfu-c-muted);
}

.wp-block-list.is-style-examples > li > strong {
	display: block;
	margin: 0.125rem 0;
	font-family: var(--cfu-c-zh);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--cfu-c-ink);
}

.wp-block-list.is-style-examples > li > em {
	display: block;
	font-style: normal;
	color: var(--cfu-c-muted);
}

.wp-block-list.is-style-examples > li br {
	display: none;      /* the three lines are blocks already */
}

/* Paragraph style "Examples title": the questions' heading line (the story's title, the same three lines). */
p.is-style-examples-lead {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cfu-c-faint);
}

p.is-style-examples-lead > strong {
	display: block;
	font-family: var(--cfu-c-zh);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--cfu-c-ink);
}

p.is-style-examples-lead > em {
	display: block;
	font-style: normal;
	color: var(--cfu-c-muted);
}

p.is-style-examples-lead br {
	display: none;
}

/* ---------- Block: Lesson-type badge (cfu/lesson-type) ---------- */
.cfu-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	margin: 0 0 0.5rem;
	padding: 0.25em 0.75em 0.25em 0.5em;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.cfu-type-badge .cfi {
	font-size: 1.15em;
}

.cfu-type-badge--interpersonal {
	background: var(--cfu-app-chip-course-bg, #99f6e4);
	color: var(--cfu-app-chip-course-fg, #042f2e);
}

.cfu-type-badge--presentational {
	background: var(--cfu-app-chip-overview-bg, #93c5fd);
	color: var(--cfu-app-chip-overview-fg, #172554);
}

/* ---------- Block: Lesson video (cfu/video) ---------- */
.cfu-video {
	margin: 0 0 var(--cfu-c-block);
}

/* The player (figure.cfu-video; the waiting card and the upsell are divs). The figure holds the 16:9 box and rounds
   it; the iframe overhangs it by 1px on every side. A radius and a dark background on the iframe itself let that
   background bleed through the anti-aliased corners, and the fractional 16:9 height left a sub-pixel row of it (or
   of the player's own letterbox) along the top edge (Chuck, 2026-11-07). Now any edge row is clipped away, and the
   placeholder is light, so what an anti-aliased corner still blends in is the page colour, not black. clip-path also
   clips the iframe's composited layer in Safari, where overflow alone may not. */
figure.cfu-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	clip-path: inset(0 round 12px);
	background: #f5f5f4;
}

figure.cfu-video iframe {
	position: absolute;
	top: -1px;
	left: -1px;
	display: block;
	width: calc(100% + 2px);
	max-width: none; /* the theme's iframe { max-width: 100% } would cut the overhang on the right */
	height: calc(100% + 2px);
	border: 0;
}

/* The 32-day wait (new 1 Month members): a calm card where the video will be. */
.cfu-video-wait {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 0;
	padding: 1.5rem 24px;
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: var(--cfu-c-soft);
	color: var(--cfu-c-text);
}

.cfu-video-wait .cfu-video-wait__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.75rem;
	border-radius: 10px;
	background: var(--cfu-app-chip-overview-bg, #93c5fd);
	color: var(--cfu-app-chip-overview-fg, #172554);
	font-size: 1.25rem;
}

.cfu-video-wait .cfu-video-wait__title {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cfu-c-ink);
}

.cfu-video-wait .cfu-video-wait__text {
	max-width: 34rem;
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cfu-c-muted);
}

.cfu-video-wait .cfu-video-wait__meter {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(100%, 20rem);
	font-size: 0.8125rem;
	color: var(--cfu-c-muted);
}

.cfu-video-wait .cfu-video-wait__bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--cfu-c-line);
	overflow: hidden;
}

.cfu-video-wait .cfu-video-wait__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cfu-c-blue);
}

/* The theme's upsell player printed by the video block for Free trial viewers: the block's spacing. */
.cfu-video > .cfu-oops-wrap {
	margin: 0;
}

/* ---------- Block: Instructions (cfu/instructions) ---------- */
.cfu-instructions {
	margin: 0 0 var(--cfu-c-block);
	padding: 1.125rem 20px 1.25rem;
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: var(--cfu-c-soft);
}

.cfu-instructions .cfu-instructions__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0.875rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cfu-c-muted);
}

.cfu-instructions__title .cfi {
	font-size: 1.125rem;
	color: var(--cfu-c-ink);
}

.cfu-instructions .cfu-instructions__steps {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cfu-step;
}

.cfu-instructions__steps > li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cfu-c-ink);
	counter-increment: cfu-step;
}

.cfu-instructions__steps > li::before {
	content: counter(cfu-step);
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--stone-300, #d6d3d1);
	border-radius: 50%;
	background: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--cfu-c-muted);
	transform: translateY(-0.05rem);
}

.cfu-instructions__steps small {
	display: block;
	font-size: 0.8125rem;
	color: var(--cfu-c-faint);
}

/* ---------- Callout style "See also" (cfu/callout) ---------- */
.cfu-see-also {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 var(--cfu-c-group);
	padding: 0.5rem 14px;
	border: 1px solid var(--cfu-c-line);
	border-radius: 10px;
	background: var(--cfu-c-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cfu-c-text);
}

.cfu-see-also > .cfi {
	flex: none;
	font-size: 1rem;
	color: var(--cfu-c-blue);
	transform: translateY(0.12rem);
}

.cfu-see-also .cfu-see-also__label {
	font-weight: 600;
	color: var(--cfu-c-ink);
}

.cfu-see-also a {
	font-weight: 600;
}

.cfu-see-also .cfu-see-also__body > :last-child {
	margin-bottom: 0;
}

/* The other callouts (note / tip / warning): the theme's alerts; no extra space under the last paragraph. */
.cfu-callout > :last-child {
	margin-bottom: 0;
}

/* ---------- Block: Table (cfu/table): presets Vocabulary, Large text, Default ---------- */
/* Usable at 375px: only the table scrolls sideways (never the page); words never break inside a cell. Where there
   is more to scroll, that edge fades out to white (a mask over the content, so it fades into the white page); the
   front script (src/front/table-fade.ts) sets data-fade="start|end|both" from the scroll position. */
.cfu-table {
	--cfu-fade-start: 0px;
	--cfu-fade-end: 0px;
	position: relative;
	margin: 0 0 var(--cfu-c-block);
	overflow-x: auto;
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cfu-fade-start), #000 calc(100% - var(--cfu-fade-end)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--cfu-fade-start), #000 calc(100% - var(--cfu-fade-end)), transparent);
}

.cfu-table[data-fade="start"],
.cfu-table[data-fade="both"] {
	--cfu-fade-start: 48px;
}

.cfu-table[data-fade="end"],
.cfu-table[data-fade="both"] {
	--cfu-fade-end: 48px;
}

.cfu-table:focus-visible {
	outline: 2px solid var(--cfu-c-ink);
	outline-offset: 2px;
}

.cfu-table > table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--cfu-c-text);
}

.cfu-table > table > caption {
	caption-side: top;
	padding: 0.75rem 14px 0;
	font-size: 0.8125rem;
	color: var(--cfu-c-faint);
}

.cfu-table th,
.cfu-table td {
	padding: 0.625rem 12px;
	border: 0;
	border-bottom: 1px solid var(--stone-100, #f5f5f4);
	text-align: left;
	vertical-align: middle;
	background: transparent;
}

.cfu-table thead th {
	border-bottom: 1px solid var(--cfu-c-line);
	background: var(--cfu-c-soft);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--cfu-c-muted);
}

.cfu-table tbody tr:last-child > * {
	border-bottom: 0;
}

.cfu-table tbody tr:hover > * {
	background: rgba(250, 250, 249, 0.85);
}

/* Column roles (CFU_Blocks_Table reads them from the header: HSK, Chinese / Character / Radical, Pinyin, P.O.S,
   English, Audio). */
.cfu-table .c-hsk {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

.cfu-table td.c-hsk {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cfu-c-text);
}

.cfu-table td.c-hsk.is-na {
	font-weight: 400;
	color: var(--stone-400, #a8a29e);
}

.cfu-table td.c-zh {
	font-family: var(--cfu-c-zh);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--cfu-c-ink);
}

.cfu-table td.c-py {
	white-space: nowrap;
	color: var(--cfu-c-text);
}

.cfu-table td.c-pos {
	white-space: nowrap;
	font-size: 0.8125rem;
	color: var(--cfu-c-faint);
}

.cfu-table td.c-en {
	min-width: 12rem;
}

.cfu-table .c-audio {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

.cfu-table td.c-audio {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Preset "Default" (example sentences, grammar grids): the same lines, centered cells. */
.cfu-table--default td,
.cfu-table--default th {
	text-align: center;
}

.cfu-table--default td {
	border-right: 1px solid var(--stone-100, #f5f5f4);
}

.cfu-table--default td:last-child {
	border-right: 0;
}

/* Preset "Large text" (characters lessons; the old 18px / 14pt tables). */
.cfu-table--lg > table {
	font-size: 1.125rem;
}

.cfu-table--lg td.c-zh {
	font-size: 1.5rem;
}

/* The speaker button in a table row: the theme's .cfu-audio-btn, a touch smaller so rows stay even. */
.cfu-table .cfu-audio-btn {
	font-size: 1.625rem;
}

/* ---------- Block: Tabs, transcript (cfu/tabs with English / 中文 / Pinyin tabs) ---------- */
.cfu-transcript .tab-pane .card-body {
	padding: 1.25rem 20px;
}

.cfu-transcript .tab-pane p {
	margin: 0 0 1rem;
	line-height: 1.75;
	color: var(--cfu-c-ink);
}

.cfu-transcript .tab-pane p:last-child {
	margin-bottom: 0;
}

/* Chinese sizing: the 中文 tab only (lang zh-Hans), never pinyin (lang zh-Latn-pinyin). */
.cfu-transcript [lang|="zh"]:not([lang*="Latn"]) > p {
	font-size: 1.1875rem;
	line-height: 1.95;
}

/* Paragraph style "Transcript title" (the title line at the top of each transcript tab). */
.cfu-transcript .tab-pane p.is-style-transcript-title {
	margin-bottom: 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.cfu-transcript [lang|="zh"]:not([lang*="Latn"]) > p.is-style-transcript-title {
	font-size: 1.375rem;
}

/* Literal-translation note: the theme's Bootstrap primary alert, dismissible; the front script keeps it closed. */
.cfu-tabs-note.alert {
	display: flex;
	gap: 8px;
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.cfu-tabs-note > .cfi {
	flex: none;
	font-size: 1rem;
	color: var(--cfu-c-blue);
	transform: translateY(0.12rem);
}

/* Dismissed earlier (set on <html> by the head script before the note is drawn, so it never flashes). */
.cfu-dismissed-literal-translation [data-cfu-dismiss="literal-translation"] {
	display: none !important;
}

/* Format "Speaker": dialogue speaker names (妈妈：). */
.cfu-speaker {
	font-weight: 600;
	color: var(--cfu-c-blue);
}

/* ---------- Block: Downloads (cfu/downloads) ---------- */
.cfu-downloads {
	margin: 0 0 var(--cfu-c-block);
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.cfu-downloads .cfu-downloads__title {
	margin: 0;
	padding: 0.75rem 16px;
	border-bottom: 1px solid var(--cfu-c-line);
	background: var(--cfu-c-soft);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cfu-c-muted);
}

.cfu-downloads .cfu-downloads__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfu-downloads__list > li + li {
	border-top: 1px solid var(--stone-100, #f5f5f4);
}

.cfu-downloads .cfu-downloads__file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0.75rem 16px;
	color: var(--cfu-c-ink);
	text-decoration: none;
}

.cfu-downloads .cfu-downloads__file:hover {
	background: var(--cfu-c-soft);
	color: var(--cfu-c-ink);
}

.cfu-downloads .cfu-downloads__file:focus-visible {
	outline: 2px solid var(--cfu-c-ink);
	outline-offset: -2px;
}

.cfu-downloads__name {
	flex: 1;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
}

.cfu-downloads__meta {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--cfu-c-faint);
}

.cfu-downloads__get {
	flex: none;
	font-size: 1.25rem;
	color: var(--cfu-c-muted);
}

.cfu-app-chip.cfu-chip--vocab {
	background: var(--cfu-app-chip-green-bg, #bbf7d0);
	color: var(--cfu-app-chip-green-fg, #052e16);
}

.cfu-app-chip.cfu-chip--sheet {
	background: var(--cfu-app-chip-sheet-bg, #e9d5ff);
	color: var(--cfu-app-chip-sheet-fg, #3b0764);
}

.cfu-app-chip.cfu-chip--homework {
	background: var(--cfu-app-chip-course-bg, #99f6e4);
	color: var(--cfu-app-chip-course-fg, #042f2e);
}

.cfu-app-chip.cfu-chip--practice-sheet {
	background: var(--cfu-app-chip-cert-bg, #fbcfe8);
	color: var(--cfu-app-chip-cert-fg, #500724);
}

/* ---------- Blocks: Practice task (STEP 1, cfu/practice-task) and Share your work (STEP 2, cfu/share-work) ---------- */
.cfu-step {
	margin: 0 0 1.5rem;
	padding: 1.25rem 20px 1.5rem;
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: #fff;
}

.cfu-step .cfu-step__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 1rem;
}

.cfu-step__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cfu-c-ink);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
}

.cfu-step--optional .cfu-step__num {
	border: 1px solid var(--stone-300, #d6d3d1);
	background: #fff;
	color: var(--cfu-c-ink);
}

.cfu-step__eyebrow {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cfu-c-faint);
}

.cfu-step .cfu-step__title {
	display: block;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cfu-c-ink);
}

.cfu-step__body > :last-child {
	margin-bottom: 0;
}

.cfu-step__body p,
.cfu-step__body ul,
.cfu-step__body ol {
	margin: 0 0 var(--cfu-c-group);
}

.cfu-step__body li + li {
	margin-top: 0.25rem;
}

/* Paragraph style "Task prompt" (with the "Chinese" format for its first line) and "Tip". */
.cfu-step__body p.is-style-task-prompt,
p.is-style-task-prompt {
	margin: 0 0 var(--cfu-c-group);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cfu-c-ink);
}

p.is-style-task-prompt .cfu-zh {
	display: block;
	font-size: 1.375rem;
	font-weight: 600;
}

p.is-style-tip {
	display: flex;
	gap: 8px;
	padding: 0.625rem 14px;
	border-radius: 10px;
	background: var(--cfu-c-soft);
	font-size: 0.9375rem;
	color: var(--cfu-c-ink);
}

p.is-style-tip > .cfi {
	flex: none;
	color: var(--cfu-c-blue);
	transform: translateY(0.15rem);
}

.cfu-share .accordion {
	margin: 0 0 1.25rem;
}

.cfu-share .cfu-share__guide {
	display: block;
	width: 100%;
	max-width: 586px;
	height: auto;
	margin: 0 auto 1rem;
}

.cfu-share__how ul {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.cfu-share__how li + li {
	margin-top: 0.375rem;
}

.cfu-share__how > :last-child {
	margin-bottom: 0;
}

.cfu-quote {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.cfu-quote .cfu-quote__photo {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.cfu-quote__text {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--cfu-c-text);
}

.cfu-quote figcaption {
	margin: 0;
}

.cfu-quote__who {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cfu-c-ink);
}

/* ---------- Block: Quiz intro (cfu/quiz-intro) ---------- */
.cfu-quiz-intro {
	margin: 1.25rem 0 1.5rem;
	padding: 1rem 18px;
	border: 1px solid var(--cfu-c-line);
	border-radius: 12px;
	background: var(--cfu-c-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--cfu-c-text);
}

.cfu-quiz-intro .cfu-quiz-intro__row {
	display: flex;
	gap: 10px;
	margin: 0;
}

.cfu-quiz-intro .cfu-quiz-intro__row + .cfu-quiz-intro__row {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cfu-c-line);
}

.cfu-quiz-intro__row > .cfi {
	flex: none;
	font-size: 1.125rem;
	color: var(--cfu-c-ink);
	transform: translateY(0.12rem);
}

.cfu-quiz-intro__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 0.25rem;
}

.cfu-quiz-intro__links a {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Lock card, compact note, the 32-day note, staff label ---------- */
/* The theme's .cfu-restricted in a card (first hidden section of a page) and the plugin's one-line .cfu-lock-note
   (later ones, and a section a new 1 Month member waits for). */
.cfu-lock,
.cfu-lock-note {
	margin: 0 0 var(--cfu-c-block);
}

.cfu-lock.card {
	border-radius: 12px;
}

.cfu-lock-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	padding: 0.625rem 14px;
	border: 1px solid var(--bs-border-color, #e7e5e4);
	border-radius: 10px;
	background: var(--cfu-c-soft);
	font-size: 0.875rem;
	color: var(--bs-secondary-color, #57534e);
}

.cfu-lock-note > .cfi {
	margin-right: 2px;
	color: var(--bs-body-color, #1c1917);
}

.cfu-lock-note > a {
	font-weight: 600;
}

/* ---------- Step card (0.4.11): the lock card's look (.cfu-lock.card + the theme's .cfu-restricted) ---------- */
.cfu-step-card {
	margin: 0 0 var(--cfu-c-block);
}

.cfu-step-card.card {
	border-radius: 12px;
}

.cfu-step-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bs-body-color, #1c1917);
}

.cfu-step-card__label > .cfi {
	flex: none;
	font-size: 1.375rem;
	line-height: 1;
	color: #737373;
}

.cfu-step-card__text {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #737373;
}

.cfu-step-card__label + .cfu-step-card__action {
	margin-top: 12px;
}

.cfu-step-card__action {
	margin: 0;
}

.cfu-step-card__action > .btn {
	--bs-btn-padding-x: 16px;
	--bs-btn-padding-y: 7px;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-font-weight: 500;
	--bs-btn-border-width: 1px;
	--bs-btn-border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Content links get a bottom border from the theme; the button keeps its own, as on the lock card. */
.cfu-step-card.cfu-step-card .cfu-step-card__action > .btn.btn.btn {
	border-bottom-style: solid !important;
	border-bottom-width: var(--bs-btn-border-width) !important;
	border-bottom-color: var(--bs-btn-border-color) !important;
	text-decoration: none;
}

.cfu-step-card.cfu-step-card .cfu-step-card__action > .btn.btn.btn:hover,
.cfu-step-card.cfu-step-card .cfu-step-card__action > .btn.btn.btn:active {
	border-bottom-color: var(--bs-btn-hover-border-color) !important;
}

.cfu-step-card.cfu-step-card .cfu-step-card__action > .btn.btn.btn:focus-visible {
	box-shadow: var(--bs-btn-focus-box-shadow) !important;
}

/* Staff only: the audience of a section, above it. */
.cfu-audience {
	margin-bottom: 1.5rem;
	padding-left: 12px;
	border-left: 3px solid var(--bs-primary, #0966fb);
}

.cfu-audience-label {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--bs-secondary-color, #57534e);
}

.cfu-audience-tag {
	font-weight: 600;
	color: var(--bs-primary, #0966fb);
}

/* The lock message and staff label inside a Chinese tab keep the body face. */
.cfu-transcript .cfu-restricted,
.cfu-transcript .cfu-audience-label {
	font-family: var(--bs-body-font-family);
}