/* FEL Forge — interactive worksheet widget. Scoped to .fel-forge. * * RESTYLING: every visual choice is a --forge-* custom property declared in the token * block below. To retune Forge to the final design, override those tokens in one place * (e.g. in the theme's lab.css) — you should not need to touch the component rules. * Tokens inherit the theme's OKLCH palette (--accent, --wrong, --line, --sans …) where * one exists, each with a safe standalone fallback. */ .fel-forge { /* palette */ --forge-font: var(--sans, "Onest", system-ui, sans-serif); --forge-ink: var(--ink, currentColor); --forge-muted: var(--muted, color-mix(in oklch, currentColor 55%, transparent)); --forge-surface: var(--surface, transparent); --forge-line: var(--line, color-mix(in oklch, currentColor 16%, transparent)); --forge-soft: var(--accent-soft, color-mix(in oklch, currentColor 6%, transparent)); --forge-accent: var(--accent, oklch(0.55 0.198 262)); --forge-accent-ink: var(--accent-ink, var(--forge-accent)); --forge-on-accent: #fff; --forge-ok: var(--lime-ink, oklch(0.52 0.13 144)); --forge-ok-soft: var(--lime-soft, color-mix(in oklch, var(--forge-ok) 16%, transparent)); /* The bright lime, for fills and rings that sit next to --forge-ok text (the Done pill's border, a completed TOC dot). --forge-ok is the ink; this is the paint. */ --forge-ok-fill: var(--lime, var(--forge-ok)); /* Second accent, for the gradient on the overall progress bar. */ --forge-accent-2: var(--accent-2, var(--forge-accent-ink)); --forge-bad: var(--wrong-ink, oklch(0.58 0.19 25)); --forge-bad-soft: var(--wrong-soft, color-mix(in oklch, var(--forge-bad) 12%, transparent)); /* shape & rhythm */ --forge-radius: 1rem; --forge-radius-sm: 0.8rem; /* Inline icon masks (data-URI SVG, Feather-style) for the mobile contents trigger. */ --forge-ico-contents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); --forge-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); /* The `::: spoiler icon=name` set (fel_forge_icons() in parser.php is the name list — keep the two in step). Same shape as the two above: a stroked 24×24 outline, drawn as a mask over currentColor, so an icon takes the title's colour and a multiple of its size. That is the whole reason these exist rather than an emoji — see the comment on fel_forge_icons(). Adding one: a var here, a line there, an [data-ico] arm below. */ --forge-ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); --forge-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); --forge-ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); --forge-ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E"); --forge-ico-ear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); --forge-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); /* underline-style gap: rounded top, near-square bottom (it sits on the accent rule) */ --forge-gap-radius: 0.45em 0.45em 0.12em 0.12em; --forge-card-pad: 1.4rem 1.55rem; --forge-line-strong: var(--line-strong, color-mix(in oklch, var(--forge-line) 60%, currentColor)); --forge-faint: var(--faint, var(--forge-muted)); /* Drop-area fill. Answer areas (slots, answer line) are boxes on --forge-panel with a --forge-line-strong dash; the word bank deliberately has no box, so the two never read as the same thing. */ --forge-panel: var(--panel, color-mix(in oklch, currentColor 5%, transparent)); /* none = fill the content column (matches native content width). A readable cap like 46rem can be reinstated here during the final design pass. */ --forge-maxw: none; /* Answer-option lists (choice / true-false) are capped + left-aligned; the exercise card itself stays full width. Add margin-inline:auto on .forge-opts to centre them. */ --forge-opts-maxw: 34rem; /* An illustration standing alone in its paragraph is capped HERE, not at the content width: a 1200px picture filling the column dwarfs the 16px prose around it, which is exactly what a graded reader looked like before this token existed. An explicit `![alt](url){width=…}` writes an inline style and beats it. */ --forge-fig-maxw: 34rem; /* An illustration *inside* an exercise is capped smaller again. It is context for the question — Duolingo's coffee pot — and at the figure's 34rem it becomes the exercise, with the thing to actually do below the fold on a phone. */ --forge-illus-maxw: 20rem; font-family: var(--forge-font); color: var(--forge-ink); font-size: 1rem; /* explicit ~16px base — see FORGE-DOM.md (TT5's 22px is not ours) */ line-height: 1.6; -webkit-font-smoothing: antialiased; max-width: var(--forge-maxw); } .fel-forge .forge-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; } .fel-forge .forge-h { font-size: 1.15rem; font-weight: 650; margin: 1.75rem 0 .6rem; } .fel-forge .forge-p { margin: .5rem 0; } .fel-forge .forge-img { max-width: 100%; height: auto; border-radius: var(--forge-radius-sm); margin: .5rem 0; } /* An image alone in its paragraph gets a line of its own, centred. Inside a sentence it stays inline — see fel_forge_block_image(). `{align=left|right}` overrides the centring with an inline style on the
. */ .fel-forge .forge-figure { margin: 1rem 0; text-align: center; } .fel-forge .forge-figure .forge-img { margin: 0; max-width: min(100%, var(--forge-fig-maxw)); } /* An exercise's illustration — a picture on its own line inside the block, drawn at the top of the card. Smaller than a standalone figure by default: it is context for the question, and a picture taller than the question it illustrates buries it. `{width=…}` overrides (inline style beats this), and `{align=…}` positions it in the column. */ .fel-forge .forge-illus { margin: 0 0 .9rem; } .fel-forge .forge-illus .forge-figure { margin: 0; } .fel-forge .forge-illus .forge-figure + .forge-figure { margin-top: .5rem; } .fel-forge .forge-illus .forge-img { max-width: min(100%, var(--forge-illus-maxw)); border-radius: var(--forge-radius-sm); } /* `{align=left}` / `{align=right}` — the picture sits beside the exercise and the question wraps around it. A real float, because that is the only thing that makes *text* flow around a picture; every sub-layout an exercise draws below the question (the option grid, the word bank, the chip row, the pairs) is flex or grid, so each keeps to its own side of the float without being told to. Capped at 45%: past that the picture and the question are two narrow columns and neither reads. `align=center` and no align both keep the picture above — that is the default. */ .fel-forge .forge-illus--left { float: left; margin: .15rem 1.1rem .6rem 0; max-width: 45%; } .fel-forge .forge-illus--right { float: right; margin: .15rem 0 .6rem 1.1rem; max-width: 45%; } /* The card has to grow to hold the picture — a float does not add to its parent's height, so a tall illustration would hang out of the bottom of the card and over the next one. */ .fel-forge .forge-ex:has(> .forge-illus--left, > .forge-illus--right)::after { content: ""; display: block; clear: both; } /* The full-width "type what you hear" box is a plain block, so it would run *under* a floated picture rather than beside it. flow-root keeps it to its own side. (The given-letters variant is already a flex box, which does this for free.) */ .fel-forge .forge-typehear .forge-blank:not(.forge-blank--given) { display: flow-root; } /* On a phone, "beside" is two columns of about 150px each — the picture too small to read and the question one word per line. The float is dropped and the picture goes back on top; it keeps its horizontal alignment there (`align=right` stays right), because that comes from an inline style on the figure and overriding it would take !important to say nothing useful. Immediately after the rules it overrides, so this is ordering rather than a specificity fight. Verified at real 390 / 560 / 561 / 600px viewports. */ @media (max-width: 560px) { .fel-forge .forge-illus--left, .fel-forge .forge-illus--right { float: none; margin: 0 0 .9rem; max-width: 100%; } } /* Emphasis carries meaning here — a bold L2 instruction over a muted L1 line — so the weight is stated rather than left to whatever the surrounding theme does with . */ .fel-forge strong, .fel-forge b { font-weight: 700; } /* Secondary text. `~~run~~` mutes part of a line; `~ ` at the start of a line mutes and shrinks the whole of it — the Russian line under an English instruction, the pattern the H5P worksheets used for L1 glosses. Same colour token as every other muted thing here. */ .fel-forge .forge-muted { color: var(--forge-muted); } .fel-forge .forge-muted-line { font-size: .9em; } /* Display title + subtitle (::: title) — big text that is NOT a heading and so adds no contents row. The lead page of a reader is what this is for. */ .fel-forge .forge-titleblock { margin: 1.25rem 0 1.5rem; } .fel-forge .forge-display { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .4rem; text-wrap: balance; } .fel-forge .forge-subtitle { font-size: 1.05rem; color: var(--forge-muted); margin: 0 0 .25rem; text-wrap: balance; } .fel-forge .forge-titleblock > :last-child { margin-bottom: 0; } /* ::: center — a cover block (title + picture) centred as one. text-align inherits, so this one declaration reaches the prose, the title and the figure inside it. */ .fel-forge .forge-center { text-align: center; } .fel-forge .forge-center .forge-read > .forge-p { margin-inline: auto; } /* Pipe tables. Vocabulary is a table — word · part of speech · перевод · example. The wrapper scrolls rather than the page: a wide table on a phone would otherwise push the whole document sideways, and in multipage that takes the contents column and the nav row with it. --forge-table-colw is the readable floor per column; the renderer writes the column count into --forge-table-cols, so a four-column table scrolls at 320px while a two-column glossary still just fits. */ .fel-forge .forge-tablewrap { overflow-x: auto; margin: 1rem 0; } .fel-forge .forge-table { --forge-table-colw: 6.5rem; border-collapse: collapse; width: 100%; min-width: calc(var(--forge-table-cols, 1) * var(--forge-table-colw)); font-size: .95em; text-align: left; /* per-column `|:--:|` writes an inline style, which wins */ } .fel-forge .forge-table th, .fel-forge .forge-table td { padding: .45rem .7rem; border-bottom: 1px solid var(--forge-line); vertical-align: top; } .fel-forge .forge-table thead th { font-weight: 700; color: var(--forge-accent-ink); background: var(--forge-soft); border-bottom-color: var(--forge-line-strong); } .fel-forge .forge-table tbody tr:last-child > * { border-bottom: 0; } .fel-forge .forge-table .forge-img { margin: 0; max-width: 100%; } /* Guidance callout */ .fel-forge .forge-hint { background: var(--forge-soft); border-left: 3px solid var(--forge-accent); border-radius: var(--forge-radius-sm); padding: .6rem .9rem; margin: 1rem 0; font-size: .95em; } /* Folded reference matter (::: spoiler). The soft fill is on the SUMMARY ONLY, not on the whole block: filling both title and body made an open spoiler a slab the size of ::: hint, which says "read me now" — the opposite of what this block is for. Tinting just the title keeps the affordance (it is a control, and it looks like one) without the slab. The fill spans the column, so the title row reads as a bar. Open, a neutral --forge-line rule ties the body to its title, so the body stays plain prose and competes with nothing. Native
; no JS anywhere in this component. */ .fel-forge .forge-spoiler { margin: 1rem 0; font-size: .95em; } .fel-forge .forge-spoiler__sum { /* Full-column fill (asked for 2026-07-26): the title row reads as a section bar rather than a chip. Swap back to inline-flex to make it hug the title again. */ display: flex; align-items: flex-start; gap: .45rem; padding: .4rem .75rem .4rem .6rem; background: var(--forge-soft); border-radius: var(--forge-radius-sm); cursor: pointer; font-weight: 650; color: var(--forge-accent-ink); list-style: none; /* Firefox */ user-select: none; transition: background-color .15s; } .fel-forge .forge-spoiler__sum:hover { background: color-mix(in oklch, var(--forge-accent) 14%, transparent); } .fel-forge .forge-spoiler__sum::-webkit-details-marker { display: none; } /* Chevron leads the label rather than trailing it: the row is only as wide as its text, so a far-right marker would float away from short titles. Rotates on open. The top margin pins it to the FIRST line — a title long enough to wrap must not centre it between two. */ .fel-forge .forge-spoiler__sum::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: .28em; background: currentColor; -webkit-mask: var(--forge-ico-chevron) center / contain no-repeat; mask: var(--forge-ico-chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform .2s ease; } .fel-forge .forge-spoiler[open] .forge-spoiler__sum::before { transform: rotate(0); } /* `::: spoiler icon=name`. Sized in `em` so it tracks the title, and pinned to the first line with the same margin-top as the chevron — `align-items: flex-start` would otherwise centre it against a title long enough to wrap. It is a real flex item, so the summary's `gap` already spaces it from the label; no margin of its own. */ .fel-forge .forge-spoiler__ico { flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-top: .22em; background: currentColor; -webkit-mask: var(--forge-ico) center / contain no-repeat; mask: var(--forge-ico) center / contain no-repeat; } .fel-forge .forge-spoiler__ico[data-ico="book"] { --forge-ico: var(--forge-ico-book); } .fel-forge .forge-spoiler__ico[data-ico="info"] { --forge-ico: var(--forge-ico-info); } .fel-forge .forge-spoiler__ico[data-ico="star"] { --forge-ico: var(--forge-ico-star); } .fel-forge .forge-spoiler__ico[data-ico="pencil"] { --forge-ico: var(--forge-ico-pencil); } .fel-forge .forge-spoiler__ico[data-ico="ear"] { --forge-ico: var(--forge-ico-ear); } .fel-forge .forge-spoiler__ico[data-ico="check"] { --forge-ico: var(--forge-ico-check); } .fel-forge .forge-spoiler__sum:focus-visible { outline: 2px solid var(--forge-accent); outline-offset: 1px; } .fel-forge .forge-spoiler__body { margin: .3rem 0 0 .55rem; padding: .15rem 0 .15rem .9rem; border-left: 2px solid var(--forge-line); } .fel-forge .forge-spoiler__body > :first-child { margin-top: 0; } .fel-forge .forge-spoiler__body > :last-child { margin-bottom: 0; } .fel-forge .forge-ul { margin: .4rem 0; padding-left: 1.15rem; } .fel-forge .forge-ul li { margin: .2rem 0; } /* The block card — one rule for every top-level block, so retuning the tokens moves them all. Not all of them are checkpoints: .forge-pairs self-grades, so it has no Check button and no .forge-checkpoint class .forge-textblock reading matter (::: text) .forge-listen reading matter with audio (::: listen) They're carded anyway — a bare block between carded neighbours reads as broken. Only the graded ones get the :has() border reaction below. */ .fel-forge .forge-checkpoint, .fel-forge .forge-pairs, .fel-forge .forge-textblock, .fel-forge .forge-listen { border: 1px solid var(--forge-line); border-radius: var(--forge-radius); background: var(--forge-surface); padding: var(--forge-card-pad); margin: .9rem 0; transition: border-color .15s; } /* Whole-card reaction to grading — there is no state class on the card, so key off feedback */ .fel-forge .forge-checkpoint:has(.forge-fb.is-pass), .fel-forge .forge-pairs:has(.forge-fb.is-pass) { border-color: color-mix(in srgb, var(--forge-ok) 45%, var(--forge-line)); } .fel-forge .forge-checkpoint:has(.forge-fb.is-partial) { border-color: color-mix(in srgb, var(--forge-bad) 40%, var(--forge-line)); } .fel-forge .forge-group .forge-ex, .fel-forge .forge-group .forge-choice { margin: .4rem 0; } .fel-forge .forge-group .forge-ex + .forge-choice { margin-top: .8rem; } /* Blanks */ .fel-forge .forge-blank { white-space: nowrap; } /* A gap is a ~1.9em-tall box dropped into a 1.6 line box, so four gapped sentences under each other had their fields touching. Only paragraphs that actually carry a gap get the taller leading — prose keeps its reading rhythm. (Same trick as .forge-complete-line and .forge-tapword-line, which set their own leading for exactly this reason.) */ .fel-forge .forge-p:has(.forge-blank) { line-height: 2.6; } .fel-forge .forge-gap { /* `font: inherit` is the shorthand, so it inherits the *line-height* too — and the line above deliberately sets 2.4 on any paragraph carrying a gap. A form control does not just sit on that leading, it grows to it: the field became a ~43px box holding one 15px word, and consecutive gapped sentences ended up with 0px between their fields. The paragraph keeps its airy leading; the control gets its own. */ font: inherit; line-height: 1.4; font-size: .95em; font-weight: 700; color: var(--forge-accent-ink); text-align: center; padding: .28em .7em; min-width: 5.5em; border: 0; border-bottom: 2.5px solid var(--forge-accent); border-radius: var(--forge-gap-radius); background: var(--forge-soft); transition: border-color .15s, background .15s, box-shadow .15s; } .fel-forge select.forge-gap { min-width: 7em; cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 1.9em; background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234c46c6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7em center; } /* NB: these use background-color, not the `background` shorthand — the shorthand resets background-image, which would wipe select.forge-gap's custom dropdown arrow. */ .fel-forge .forge-gap:focus { outline: 0; background-color: var(--forge-surface); box-shadow: 0 0 0 3px var(--forge-soft); } .fel-forge .forge-gap::placeholder { color: var(--forge-accent-ink); font-style: italic; font-weight: 600; opacity: .5; } .fel-forge .forge-gap.is-correct { border-color: var(--forge-ok); background-color: var(--forge-ok-soft); color: var(--forge-ok); } .fel-forge .forge-gap.is-wrong { border-color: var(--forge-bad); background-color: var(--forge-bad-soft); color: var(--forge-bad); } .fel-forge .forge-gap.is-revealed { border-color: var(--forge-ok); border-style: dashed; } .fel-forge .forge-gap[disabled] { opacity: 1; cursor: default; } /* Full-width "type what you hear" box keeps a bordered box, not the inline underline. */ .fel-forge .forge-gap--wide { text-align: left; font-weight: 600; color: var(--forge-ink); border: 1.5px solid var(--forge-line); border-radius: var(--forge-radius-sm); background: color-mix(in oklch, currentColor 3%, transparent); } .fel-forge .forge-gap--wide:focus { border-color: var(--forge-accent); box-shadow: 0 0 0 3px var(--forge-soft); } .fel-forge .forge-gap--wide.is-correct, .fel-forge .forge-gap--wide.is-wrong { color: var(--forge-ink); } /* Explanatory feedback — `>> note` on a gap, a choice option or a T/F statement. Rendered by PHP and hidden here; forge.js adds .is-shown once the item resolves, so with JS off it never appears, like every other verdict. Not a `hidden` attribute: a CSS display rule would silently outrank it and the note would leak onto an unanswered page. */ .fel-forge .forge-note { display: none; } .fel-forge .forge-note.is-shown { display: block; /* .forge-blank sets white-space:nowrap so a gap never breaks across lines — inherited, that would run a whole explanation off the side of the page. */ white-space: normal; margin: .45rem 0 .1rem; padding: .5em .8em; border-left: 3px solid var(--forge-line-strong); border-radius: 0 var(--forge-radius-sm) var(--forge-radius-sm) 0; background: color-mix(in oklch, currentColor 5%, transparent); font-size: .875rem; font-weight: 500; line-height: 1.45; text-align: left; /* .forge-gap centres its text; the note is prose */ color: var(--forge-ink); } /* Colour follows the item's verdict. A choice note is inside the option's
  • and rides that li's class; a gap note lives after the paragraph (so the sentence is not split) and carries its own, set by forge.js. */ .fel-forge .forge-note.is-wrong, .fel-forge .forge-opts li.is-wrong > .forge-note.is-shown { border-left-color: var(--forge-bad); background: var(--forge-bad-soft); } .fel-forge .forge-note.is-correct, .fel-forge .forge-opts li.is-correct > .forge-note.is-shown { border-left-color: var(--forge-ok); background: var(--forge-ok-soft); } .fel-forge .forge-note.is-revealed { border-left-color: var(--forge-ok); border-left-style: dashed; background: var(--forge-ok-soft); } /* A T/F row is a flex row; its note is a third item and has to claim the full width rather than squeeze in beside the statement and the True/False pills. */ .fel-forge .forge-tf-row { flex-wrap: wrap; } .fel-forge .forge-tf-row > .forge-note.is-shown { flex: 1 0 100%; margin-bottom: .35rem; } /* A ::: match row is a two-column grid (fixed left, slot right); its note is a third cell and must span both, or it lands under the left column at a third of the width. Written `1 / -1` rather than `span 2` so a future third column cannot leave it short. */ .fel-forge .forge-match-row > .forge-note.is-shown { grid-column: 1 / -1; margin: .1rem 0 .35rem; } /* Hint marker — a superscript "?" like a footnote reference */ .fel-forge .forge-tip { vertical-align: super; font-size: .62em; line-height: 0; margin-left: .1em; padding: 0 .12em; border: 0; background: none; color: var(--forge-accent); font-weight: 700; cursor: help; } .fel-forge .forge-tip:hover { text-decoration: underline; } /* Multiple choice — full-width card, left-aligned question, and a capped, left-aligned options list (true-false will inherit). The card matches other exercises; only the options are tidied. */ .fel-forge .forge-q { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; margin: 0 0 .7rem; } .fel-forge .forge-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: var(--forge-opts-maxw); } .fel-forge .forge-opts label { display: flex; align-items: center; gap: .7em; padding: .8rem 1rem; font-size: .97rem; font-weight: 600; border: 1.5px solid var(--forge-line); border-radius: var(--forge-radius-sm); cursor: pointer; transition: border-color .14s, background .14s; } .fel-forge .forge-opts label:hover { border-color: var(--forge-line-strong); background: var(--forge-soft); } .fel-forge .forge-opts label:has(input:checked) { border-color: var(--forge-accent); background: var(--forge-soft); } .fel-forge .forge-opts li.is-correct label { border-color: var(--forge-ok); background: var(--forge-ok-soft); color: var(--forge-ok); } .fel-forge .forge-opts li.is-wrong label { border-color: var(--forge-bad); background: var(--forge-bad-soft); color: var(--forge-bad); } .fel-forge .forge-opts input { accent-color: var(--forge-accent); width: 1.05em; height: 1.05em; flex: 0 0 auto; } /* An option the learner has run out of ticks for: a multi-select asks for TWO letters and two are taken, so the rest go unavailable until one is given back (forge.js → syncMultiCap). Muted and not-allowed, never hidden or red — the option is still a legitimate answer, just not a third one, and greying is the affordance every checkbox group uses for "no more of these". Left off the checked ones on purpose: they must stay clickable, since unticking is the way out. */ .fel-forge .forge-opts li.is-capped label { opacity: .55; cursor: not-allowed; } .fel-forge .forge-opts li.is-capped label:hover { border-color: var(--forge-line); background: none; } /* Image choice — "select the correct picture": options become a grid of picture tiles. Inherits the choice feedback (li.is-correct/.is-wrong label) for green/red borders. */ .fel-forge .forge-opts--img { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; max-width: none; align-items: start; } .fel-forge .forge-opts--img label { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: .5rem; } .fel-forge .forge-opts--img input { position: absolute; width: 1px; height: 1px; opacity: 0; } .fel-forge .forge-opts--img .forge-img { width: auto; max-width: 100%; max-height: 150px; height: auto; margin: 0; object-fit: contain; pointer-events: none; } .fel-forge .forge-opts--img label:has(input:checked) { border-color: var(--forge-accent); background: var(--forge-soft); } /* True / False — compact rows: statement left, inline options right */ .fel-forge .forge-tf-row { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--forge-line); } .fel-forge .forge-tf-row:last-of-type { border-bottom: 0; } /* `flex: 1 1 0` + `min-width: 0`, not `1 1 auto`: the row is wrap-enabled (the note needs a line of its own), and a wrap-enabled line is broken on the items' *hypothetical* sizes — so a statement whose unwrapped width exceeded the row pushed the True/False pills onto a second line, left-aligned, while short statements kept theirs on the right. With a zero basis the statement never asks for more than the space that is left, and wraps instead. */ .fel-forge .forge-tf-row .forge-q { margin: 0; font-weight: 500; font-size: 1.02rem; flex: 1 1 0; min-width: 0; } .fel-forge .forge-opts--inline { display: flex; gap: .5rem; max-width: none; flex: 0 0 auto; } .fel-forge .forge-opts--inline label { padding: .45rem 1.1rem; border-radius: 2rem; } /* On a phone the statement + inline options don't fit one row — the statement collapsed to one word per line. Stack: statement full-width on its own line, options below it. */ @media (max-width: 640px) { .fel-forge .forge-tf-row { flex-direction: column; align-items: stretch; gap: .55rem; } .fel-forge .forge-tf-row .forge-opts--inline { flex: 0 0 auto; } /* Column direction — the zero basis above would be a zero *height*. Back to content-sized. */ .fel-forge .forge-tf-row .forge-q { flex: 0 0 auto; } /* Three pills (True / False / Not Given) measure ~331px and a 390px phone gives the card 299px, so the set overflowed its own card — invisibly, because the page does not scroll sideways: "Not Given" simply sat under the card's right edge. Two pills always fitted, which is why this survived. Let them wrap and share the width instead. */ .fel-forge .forge-tf-row .forge-opts--inline { flex-wrap: wrap; } .fel-forge .forge-tf-row .forge-opts--inline li { flex: 1 1 auto; } .fel-forge .forge-tf-row .forge-opts--inline label { justify-content: center; padding-inline: .7rem; } } /* Drag-to-reorder — unscramble (inline words) / sort (stacked blocks) */ .fel-forge .forge-reorder-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem; } .fel-forge .forge-unscramble .forge-reorder-list { flex-wrap: wrap; } .fel-forge .forge-sort .forge-reorder-list { flex-direction: column; } /* ── Tiled exercises inside a ::: group — one numbered lane each ────────────────────── Several tile puzzles in one checkpoint are the hard case for this whole engine: every exercise is a field of identical pills, so two of them under each other read as one bank with too many chips in it. The DOM was never the problem — each block is its own .forge-ex with its own bank and slots, and forge_validate reports them separately — but the learner cannot see the DOM, and .45rem inside a wrapped row against .4rem of collapsed margin between rows told them nothing. Three things separate them, and it takes all three: a lane rule, air on both sides of it, and a number. The number is the one that actually answers "which sentence am I on" — the rule alone says *something* changed, not *what*. It is drawn from a CSS counter, so nothing is authored and nothing is stored: the lanes are numbered in document order, which is the order the learner works through them. :has() guards it to groups that hold more than one lane — a group with a single exercise, or one tiled exercise among prose, gets no number, because a lone "1" is a list of one. Kept as a descendant selector for the lane rules (a group nests, and a lane is a lane wherever it sits) but as a child selector for the counter, so nesting cannot restart the numbering halfway down. Adjacent-sibling, not :last-of-type — a group may mix tiled exercises with choices and prose, and only lane↔lane needs the rule. */ .fel-forge .forge-group :is(.forge-reorder, .forge-match) { margin: 0; padding: .9rem 0; } .fel-forge .forge-group :is(.forge-reorder, .forge-match) + :is(.forge-reorder, .forge-match) { border-top: 1px solid var(--forge-line); } .fel-forge .forge-group :is(.forge-reorder, .forge-match):first-child { padding-top: 0; } /* Whether the numbers are *shown* is one custom property, flipped by :has() on the group; every rule that positions them is a plain selector reading that property. Written this way rather than repeating the :has() on each rule because a `:has()` selector takes its argument's specificity — (0,4,0) here — and the narrow-screen overrides at the bottom would have silently lost to it. That exact failure has cost this project a day once already (materials.css, where a mobile block sat above the rules it was overriding). */ .fel-forge .forge-group { counter-reset: forge-lane; } .fel-forge .forge-group:has(:is(.forge-reorder, .forge-match) + :is(.forge-reorder, .forge-match)) { --forge-lane-mark: counter(forge-lane); --forge-lane-pad: 1.9rem; } .fel-forge .forge-group > :is(.forge-reorder, .forge-match) { counter-increment: forge-lane; /* The number is an absolutely-positioned marker in the gutter, so it costs the lane no width — the chips keep the full column, which matters at 390px where a bank of eight words has none to spare. */ position: relative; padding-left: var(--forge-lane-pad, 0); } .fel-forge .forge-group > :is(.forge-reorder, .forge-match)::before { /* `none` when the group holds a single lane, so no box is generated at all and a lone "1" — a list of one — never appears. */ content: var(--forge-lane-mark, none); position: absolute; left: 0; top: .9rem; font-size: .78rem; font-weight: 800; line-height: 1.6; color: var(--forge-faint); font-variant-numeric: tabular-nums; } .fel-forge .forge-group > :is(.forge-reorder, .forge-match):first-child::before { top: 0; } @media (max-width: 560px) { /* 1.9rem of gutter is ~7% of a 390px screen and the chips need it back. The number goes above the lane instead of beside it, which also puts it where the eye already is. */ .fel-forge .forge-group > :is(.forge-reorder, .forge-match) { padding-left: 0; } .fel-forge .forge-group > :is(.forge-reorder, .forge-match)::before { position: static; display: block; margin-bottom: .35rem; } } .fel-forge .forge-chip { list-style: none; /* the floating drag-clone is an
  • outside the
      — kill its marker */ font-size: .95rem; font-weight: 700; padding: .5em 1em; border: 1.5px solid var(--forge-line); border-radius: 999px; background: var(--forge-surface); color: var(--forge-ink); cursor: grab; touch-action: none; user-select: none; transition: border-color .15s, background .15s, color .15s; } .fel-forge .forge-chip:hover { border-color: var(--forge-accent); color: var(--forge-accent-ink); } .fel-forge .forge-sort .forge-chip { border-radius: var(--forge-radius-sm); padding: .7em 1em; text-align: left; } .fel-forge .forge-chip.is-dragging { opacity: .35; } /* Floating clone that follows the cursor while dragging */ .fel-forge .forge-chip-ghost { position: fixed; z-index: 10000; pointer-events: none; margin: 0; left: 0; top: 0; background: var(--surface, #fff); box-shadow: 0 10px 26px rgba(15, 23, 42, .22); opacity: .97; cursor: grabbing; } .fel-forge .forge-reorder.is-locked .forge-chip { cursor: default; } /* Per-position feedback: correct words/blocks lock green (become anchors); the rest stay draggable and neutral (no "all-red"). */ .fel-forge .forge-reorder .forge-chip.is-correct { border-color: var(--forge-ok); background: var(--forge-ok-soft); color: var(--forge-ok); } .fel-forge .forge-reorder .forge-chip.is-revealed { border-color: var(--forge-ok); border-style: dashed; } .fel-forge .forge-reorder .forge-chip.is-locked { cursor: default; } /* Match / drag-fill — word bank on top (full width), fixed left column, empty slots. The bank is a bare row of chips under a caption, NOT a box: the box shape is reserved for answer areas, so a filled bank can never be mistaken for the answer. It is still a drop target (drag a chip back here to clear its slot), so the dashed outline fades in only while a drag is over it — the border is transparent, not absent, so nothing shifts. */ .fel-forge .forge-bank { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .5rem .55rem; min-height: 2.9rem; border: 1.5px dashed transparent; border-radius: var(--forge-radius-sm); transition: border-color .14s, background .14s; } .fel-forge .forge-bank.is-over { border-color: var(--forge-accent); background: var(--forge-soft); } .fel-forge .forge-bank-lbl { flex: 1 0 100%; margin-bottom: -.15rem; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--forge-faint); } .fel-forge .forge-match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .fel-forge .forge-match-row { display: grid; grid-template-columns: minmax(6rem, 1fr) 2fr; align-items: stretch; gap: .8rem; } /* NOT display:flex. A label is `**25** Use of local products`, so the row holds an element and a text run — as flex children those become two flex items, and the space between them is leading white space in an anonymous item, which flex discards. That is the whole of the reported `28products related to`: no margin was missing, the space was never rendered. It only showed on short labels because the author had put a second one in the source. A block box keeps the label as one flow of inline content (bold number, space, prose, wrapping where it likes) and align-self does the vertical centring the flexbox was there for. */ .fel-forge .forge-match-left { align-self: center; padding: .45rem .8rem; font-size: .97rem; font-weight: 700; } /* Slot column sized from the widest chip (--forge-slot-ch, set per block by the renderer) instead of a flat 2fr: a one-letter IELTS answer needs ~4rem, not 370px, and everything it gives back goes to the label that was breaking over three lines. Floor keeps the drop target thumb-sized; 45% ceiling keeps a long chip from re-creating the problem in the other direction. Scoped to ::: match — ::: translate and ::: complete reuse .forge-match-row with layouts of their own. */ .fel-forge .forge-match > .forge-match-list > .forge-match-row { grid-template-columns: minmax(6rem, 1fr) clamp(4rem, calc(var(--forge-slot-ch, 12) * 1ch + 2.9rem), 45%); } .fel-forge .forge-slot { display: flex; align-items: center; justify-content: center; min-height: 2.9rem; border: 1.5px dashed var(--forge-line-strong); border-radius: .7rem; background: var(--forge-panel); padding: 4px; transition: border-color .14s, background .14s; } .fel-forge .forge-slot.is-over { border-color: var(--forge-accent); background: var(--forge-soft); } /* Chips wrap their text so phrases (not just words) fit and slots stretch. */ .fel-forge .forge-bank-chip { max-width: 100%; white-space: normal; line-height: 1.3; } .fel-forge .forge-bank-chip.is-selected { outline: 2px solid var(--forge-accent); outline-offset: 1px; } /* image on a chip (word ↔ picture match) stays compact */ .fel-forge .forge-bank-chip .forge-img { max-height: 56px; width: auto; margin: 0; vertical-align: middle; } .fel-forge .forge-slot .forge-bank-chip { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; } .fel-forge .forge-match-row.is-correct .forge-bank-chip { border-color: var(--forge-ok); background: var(--forge-ok-soft); color: var(--forge-ok); } .fel-forge .forge-match-row.is-wrong .forge-bank-chip { border-color: var(--forge-bad); background: var(--forge-bad-soft); color: var(--forge-bad); } .fel-forge .forge-match-row.is-revealed .forge-bank-chip { border-color: var(--forge-ok); border-style: dashed; } .fel-forge .forge-match-row.is-locked .forge-bank-chip { cursor: default; } /* Word-bank translate — reuses the match engine, but the "rows" are positional slots laid out as one wrapping sentence line under the prompt. */ .fel-forge .forge-translate-prompt { font-weight: 600; margin: 0 0 .85rem; } .fel-forge .forge-answer-line { flex-direction: row; flex-wrap: wrap; gap: .45rem; align-items: center; align-content: center; padding: .7rem .8rem; border: 1.5px dashed var(--forge-line-strong); border-radius: var(--forge-radius-sm); background: var(--forge-panel); min-height: 3.4rem; } .fel-forge .forge-translate .forge-match-row { display: block; grid-template-columns: none; } .fel-forge .forge-translate .forge-slot { min-width: 3rem; min-height: 2.4rem; } /* The answer line already supplies the panel fill, so flip its slots to the surface colour — each blank reads as a hole instead of a box-on-a-box of the same shade. */ .fel-forge .forge-answer-line .forge-slot { background: var(--forge-surface); } .fel-forge .forge-translate .forge-slot .forge-bank-chip { white-space: nowrap; } /* Terminal punctuation — fixed, non-draggable, pinned at the end of the line. */ .fel-forge .forge-answer-line .forge-punct { list-style: none; display: flex; align-items: flex-end; padding: 0 .15rem .35rem; font-weight: 600; color: var(--forge-muted); } /* Dictation ("tap what you hear") — audio player above the bank: a primary Play button and a quieter, smaller Slow button. */ .fel-forge .forge-dictate-audio { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; } .fel-forge .forge-play { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 2rem; background: var(--forge-accent); color: var(--forge-on-accent); padding: .55rem 1.1rem; box-shadow: 0 6px 16px -6px var(--forge-accent); transition: background .15s, transform .12s; } .fel-forge .forge-play:hover { background: var(--forge-accent-ink); } .fel-forge .forge-play:active { transform: translateY(1px); } .fel-forge .forge-play-slow { padding: .5rem 1rem; font-size: .85em; background: var(--forge-surface); border: 1px solid var(--forge-line); color: var(--forge-muted); box-shadow: none; } .fel-forge .forge-play-slow:hover { background: var(--forge-soft); border-color: var(--forge-accent); color: var(--forge-accent-ink); } .fel-forge .forge-play-slow svg { width: 17px; height: 17px; } .fel-forge .forge-play-slow span { font-weight: 600; } .fel-forge .forge-dictate-pending { font-size: .9em; font-style: italic; color: var(--forge-muted); margin: 0 0 1rem; } /* Type what you hear — audio + a full-width text box for the whole sentence. The box is the thing being asked for, and it was losing to its own Play button: 34px of pale fill under a 48px accent pill, three of them stacked, so the eye read a column of buttons with grey strips between them. It matches the button's height now, sits on the surface colour with the stronger rule, and says "field" before it is focused. */ .fel-forge .forge-typehear .forge-blank { display: block; } .fel-forge .forge-typehear .forge-gap--wide { width: 100%; min-width: 0; text-align: left; padding: .72rem 1rem; font-size: 1rem; line-height: 1.5; background-color: var(--forge-surface); border-color: var(--forge-line-strong); } /* Grouping: the audio belonged to the box below it, but the gap inside a question (1rem) was *larger* than the gap between two questions (.4rem+.4rem collapsed), so the pairs read as the wrong pairs. Tighten inside, separate between. */ .fel-forge .forge-typehear .forge-dictate-audio { margin-bottom: .5rem; } .fel-forge .forge-group .forge-typehear + .forge-typehear { margin-top: 1.4rem; } /* ── The closing verdict — `::: outcome` ────────────────────────────────────────────── What the paper *meant*, once it has been sat. Every band is rendered and hidden here; forge.js adds .is-shown to the panel and .is-hit to the one that matched — with JS off nothing appears, exactly like every other piece of feedback, and with JS on the bands the learner did not land in stay hidden rather than reading as a menu. Deliberately heavier than a card: it is the last thing on the page and the answer to the question the whole test was solved for. The accent rule down the side is the same device a `>> note` uses, at the scale of a whole worksheet rather than one item. */ .fel-forge .forge-outcome { display: none; } .fel-forge .forge-outcome.is-shown { display: block; margin: 1.6rem 0 .9rem; padding: 1.2rem 1.4rem; border: 1px solid var(--forge-line); border-left: 4px solid var(--forge-accent); border-radius: var(--forge-radius); background: var(--forge-surface); } .fel-forge .forge-outcome-head { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--forge-faint); } /* The number, and the two words that stop it contradicting the Check button above it. Tabular figures so "9 / 40" and "24 / 40" do not shuffle the line when it updates. */ .fel-forge .forge-outcome-score { margin: .15rem 0 .7rem; font-size: 1.45rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--forge-ink); } /* `~ …` — where the boundaries came from. It belongs to the whole panel rather than to the band that matched, so it is always visible once the panel is, and quiet enough not to compete with the sentence above it. */ .fel-forge .forge-outcome-note { margin: .7rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--forge-muted); } .fel-forge .forge-outcome-note + .forge-outcome-note { margin-top: .3rem; } .fel-forge .forge-outcome-bands { list-style: none; margin: 0; padding: 0; } .fel-forge .forge-outcome-band { display: none; } .fel-forge .forge-outcome-band.is-hit { display: block; font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--forge-ink); } .fel-forge .forge-outcome-band .forge-muted { color: var(--forge-muted); font-weight: 400; } /* The question-bank panel — how far through the bank, and the way to the next set. A quiet row, not a second Check: the questions above it are the exercise, and this is the furniture around them. It sits inside the pool so it moves with it in a multipage sheet. */ .fel-forge .forge-pool-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--forge-line); } .fel-forge .forge-pool-count { font-size: .9rem; color: var(--forge-muted); } .fel-forge .forge-pool-next { font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; padding: .5em 1.2em; border-radius: 999px; border: 1.5px solid var(--forge-accent); background: transparent; color: var(--forge-accent-ink); transition: background .14s, color .14s, opacity .14s; } .fel-forge .forge-pool-next:hover:not([disabled]) { background: var(--forge-accent); color: var(--forge-on-accent); } /* Disabled until every question in the set has been checked — which is exactly when the server's round turns. Muted rather than hidden: it is the answer to "and then what?", and a button that appears from nowhere is a button nobody was waiting for. */ .fel-forge .forge-pool-next[disabled] { opacity: .45; cursor: default; border-color: var(--forge-line-strong); color: var(--forge-muted); } /* Given letters — `{{wealthy ^2}}` and `station ^1`. * * They sit in a in front of the field, so the box has to move up to the wrapper or * the learner sees two boxes. Muted and unselectable: the point of the scaffold is that * "we" reads as *given* and the rest of the field as *waiting*, which is the one thing the * first cut got wrong (the letters were the input's value, so they looked typed and the * gap looked answered). * * Placed after the .forge-gap and .forge-typehear blocks deliberately: same specificity, * so this is ordering, not a specificity fight. `:has()` moves the verdict colours to the * wrapper — the state classes stay on the input, where the JS has always put them. */ .fel-forge .forge-blank--given { display: inline-flex; align-items: stretch; border-radius: var(--forge-gap-radius); border-bottom: 2.5px solid var(--forge-accent); background: var(--forge-soft); transition: border-color .15s, background .15s, box-shadow .15s; } .fel-forge .forge-blank--given .forge-given { font: inherit; line-height: 1.4; font-size: .95em; font-weight: 700; padding: .28em .04em .28em .7em; color: var(--forge-accent-ink); opacity: .45; user-select: none; cursor: text; } .fel-forge .forge-blank--given .forge-gap { min-width: 4em; text-align: left; padding-left: 0; background: none; border-bottom-color: transparent; } /* The box's focus ring belongs to the box, not to half of it. */ .fel-forge .forge-blank--given:focus-within { background-color: var(--forge-surface); box-shadow: 0 0 0 3px var(--forge-soft); } .fel-forge .forge-blank--given .forge-gap:focus { background: none; box-shadow: none; } .fel-forge .forge-blank--given:has(.forge-gap.is-correct) { border-color: var(--forge-ok); background-color: var(--forge-ok-soft); } .fel-forge .forge-blank--given:has(.forge-gap.is-wrong) { border-color: var(--forge-bad); background-color: var(--forge-bad-soft); } .fel-forge .forge-blank--given:has(.forge-gap.is-revealed) { border-color: var(--forge-ok); border-bottom-style: dashed; } .fel-forge .forge-blank--given:has(.forge-gap.is-correct) .forge-given { color: var(--forge-ok); } .fel-forge .forge-blank--given:has(.forge-gap.is-wrong) .forge-given { color: var(--forge-bad); } .fel-forge .forge-blank--given .forge-gap:is(.is-correct, .is-wrong, .is-revealed) { background: none; border-bottom-color: transparent; } /* The same thing on the full-width "type what you hear" box. */ .fel-forge .forge-typehear .forge-blank--given { display: flex; align-items: center; width: 100%; border: 1.5px solid var(--forge-line-strong); border-radius: var(--forge-radius-sm); background-color: var(--forge-surface); } .fel-forge .forge-typehear .forge-blank--given .forge-given { font-size: 1rem; font-weight: 600; line-height: 1.5; padding: .72rem 0 .72rem 1rem; color: var(--forge-ink); opacity: .45; } .fel-forge .forge-typehear .forge-blank--given .forge-gap--wide { border: 0; background: none; padding-left: 0; } .fel-forge .forge-typehear .forge-blank--given:focus-within { border-color: var(--forge-accent); box-shadow: 0 0 0 3px var(--forge-soft); } .fel-forge .forge-typehear .forge-blank--given:has(.forge-gap.is-correct) { border-color: var(--forge-ok); background-color: var(--forge-ok-soft); } .fel-forge .forge-typehear .forge-blank--given:has(.forge-gap.is-wrong) { border-color: var(--forge-bad); background-color: var(--forge-bad-soft); } /* Complete the translation — gaps inline in a sentence, filled from the bank below. Each gap is a match-row, so it reuses the drag/tap + per-slot green-lock; only the layout changes from a column to inline. */ .fel-forge .forge-complete-line { line-height: 2.9; margin: 0 0 1rem; } .fel-forge .forge-complete .forge-match-row.forge-complete-gap { display: inline-flex; grid-template-columns: none; vertical-align: middle; } /* The empty gap is already a full chip's height, so dropping a chip in doesn't shove the line apart; the in-slot chip is shortened to sit inside it. */ .fel-forge .forge-complete .forge-complete-gap .forge-slot { min-width: 5em; min-height: 2.5rem; display: inline-flex; align-items: center; } .fel-forge .forge-complete .forge-complete-gap .forge-slot .forge-bank-chip { padding: .25em .7em; line-height: 1.25; } .fel-forge .forge-complete .forge-bank { margin: .3rem 0 0; } /* Highlight / tap-to-select ("mark the words") — a text of tappable words; correct ones are `*marked*` in the source. Multi-select choice with inline word tokens (no extra JS). */ .fel-forge .forge-opts.forge-mark-text { display: block; list-style: none; margin: 0 0 .3rem; padding: 0; max-width: none; line-height: 2.1; } .fel-forge .forge-mark-text li { display: inline; } .fel-forge .forge-mark-text label { display: inline; padding: 0; border: 0; background: none; cursor: pointer; } .fel-forge .forge-mark-text label:hover { background: none; } .fel-forge .forge-mark-text input { position: absolute; width: 1px; height: 1px; opacity: 0; } .fel-forge .forge-mark-word { padding: .18em .5em; border-radius: .5em; font-weight: 600; box-shadow: inset 0 0 0 1.5px transparent; transition: background .12s, color .12s, box-shadow .12s; } .fel-forge .forge-mark-word:hover { background: var(--forge-soft); } .fel-forge .forge-mark-text label:has(input:checked) .forge-mark-word { background: var(--forge-soft); color: var(--forge-accent-ink); box-shadow: inset 0 0 0 1.5px var(--forge-accent); } .fel-forge .forge-mark-text li.is-correct label, .fel-forge .forge-mark-text li.is-wrong label { background: none; border-color: transparent; } .fel-forge .forge-mark-text li.is-correct .forge-mark-word, .fel-forge .forge-mark-text li.is-correct label:has(input:checked) .forge-mark-word { background: var(--forge-ok-soft); color: var(--forge-ok); box-shadow: inset 0 0 0 1.5px var(--forge-ok); } .fel-forge .forge-mark-text li.is-wrong .forge-mark-word, .fel-forge .forge-mark-text li.is-wrong label:has(input:checked) .forge-mark-word { background: var(--forge-bad-soft); color: var(--forge-bad); box-shadow: inset 0 0 0 1.5px var(--forge-bad); } .fel-forge .forge-mark-sep { display: inline; white-space: pre-wrap; } /* Tap the pairs (vanishing pairs) — tiles sized to their word (flex-wrap), tap a tile then its partner. (A rigid equal grid clipped long words.) */ .fel-forge .forge-pairs-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; } .fel-forge .forge-pair-tile { font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap; padding: .6rem 1.1rem; border: 1.5px solid var(--forge-line); border-radius: 999px; background: var(--forge-surface); color: inherit; transition: border-color .15s, background .15s, opacity .25s, transform .25s; } .fel-forge .forge-pair-tile:hover { border-color: var(--forge-accent); } .fel-forge .forge-pair-tile.is-sel { border-color: var(--forge-accent); background: var(--forge-soft); font-weight: 600; } .fel-forge .forge-pair-tile.is-match { border-color: var(--forge-ok); background: var(--forge-ok-soft); color: var(--forge-ok); } .fel-forge .forge-pair-tile.is-bad { border-color: var(--forge-bad); background: var(--forge-bad-soft); animation: forge-shake .35s; } .fel-forge .forge-pair-tile.is-gone { opacity: 0; transform: scale(.82); pointer-events: none; } /* A finished board is all-.is-gone: invisible, but the tiles still hold their grid space, so the card would wrap a large void. Collapse the board once it's done. Reset drops .is-pass (status() in forge.js) and the board comes straight back. */ .fel-forge .forge-pairs:has(.forge-fb.is-pass) .forge-pairs-grid { display: none; } @keyframes forge-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* Tap the missing word — sentence with an inline gap + option tiles below. The gap is a readonly .forge-gap input (reuses the green/red feedback); tiles write into it. */ .fel-forge .forge-tapword-line { line-height: 2; margin: 0 0 .9rem; } .fel-forge .forge-tap-value { text-align: center; min-width: 5em; margin-inline: .35em; cursor: default; caret-color: transparent; } /* Broken/not-yet-added image → a labelled placeholder tile (shows the alt text) so the slot is never invisible while authoring. Swapped in by forge.js on image load error. */ .fel-forge .forge-img-fallback { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 90px; padding: .5rem; box-sizing: border-box; border: 1px dashed var(--forge-line); border-radius: var(--forge-radius-sm); color: var(--forge-muted); font-size: .85em; text-align: center; line-height: 1.3; background: repeating-linear-gradient(45deg, transparent, transparent 9px, color-mix(in oklch, currentColor 5%, transparent) 9px, color-mix(in oklch, currentColor 5%, transparent) 18px); } .fel-forge .forge-opts--img .forge-img-fallback { width: 100%; } .fel-forge .forge-tap-opts { display: flex; flex-wrap: wrap; gap: .5rem; } .fel-forge .forge-tap-opt { font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; padding: .55rem 1.1rem; border: 1.5px solid var(--forge-line); border-radius: 999px; background: var(--forge-surface); color: inherit; transition: border-color .15s, background .15s, opacity .15s; } .fel-forge .forge-tap-opt:hover { border-color: var(--forge-accent); } .fel-forge .forge-tap-opt.is-selected { border-color: var(--forge-accent); background: var(--forge-soft); color: var(--forge-accent-ink); font-weight: 600; } .fel-forge .forge-tap-opts.is-locked { pointer-events: none; } .fel-forge .forge-tap-opts.is-locked .forge-tap-opt { opacity: .5; } .fel-forge .forge-tap-opts.is-locked .forge-tap-opt.is-selected { opacity: 1; } /* Audio */ .fel-forge .forge-audio { margin: .75rem 0; } .fel-forge .forge-audio audio { width: 100%; } .fel-forge .forge-audio figcaption { font-size: .85em; color: var(--forge-muted); margin-top: .25rem; } /* Check button + feedback */ .fel-forge .forge-check { font: inherit; font-weight: 700; font-size: .9rem; padding: .72em 1.7em; /* forge.js swaps the label "Check" → "Done ✓", which is ~7px wider. Without a floor the button resizes under the cursor on the very click that grades the exercise. */ min-width: 7.25em; border: 0; border-radius: .7rem; cursor: pointer; background: var(--forge-accent); color: var(--forge-on-accent); /* Keep the negative spread small. At -10px the shadow was 20px narrower than the button, so it stopped short of the side edges and the gap under the corners read as a white stripe between the button and its shadow. -6px keeps it floating but hugging. */ box-shadow: 0 6px 16px -6px var(--forge-accent); transition: background .15s, box-shadow .15s, transform .12s, opacity .15s; } /* `:not(.is-done)` is load-bearing: with `:hover:not(:disabled)` at (0,4,0) this rule outranks `.is-done` at (0,3,0), so hovering a finished exercise repainted its green Done badge accent blue, as if it were live again. */ .fel-forge .forge-check:hover:not(:disabled):not(.is-done) { background: var(--forge-accent-ink); transform: translateY(-1px); } /* Done is a soft-lime pill, not a solid one: it's a finished state, not an action, so it steps back. Its outline is an inset shadow rather than a border — same reason as .forge-reset below. A real 1.5px border rounds to 1px on screen while padding compensation subtracts the full 1.5px, which left Done a pixel shorter than the Reset beside it. */ /* …but not *filled*, and not in the answers' green. `--forge-ok-soft` is exactly what a correct chip, gap and option are filled with, so a finished exercise ended in a stack of green tiles with a sixth green tile that happens to be the control. A deeper green fill was the first attempt and it was the wrong axis: darker or lighter, a green box under a column of green boxes is still one of them. What separates a control from an answer here is the *material* — answers are filled, controls are outlined. So Done keeps the surface it shares with the Reset beside it and says "finished" in the lime rule and the lime label. */ .fel-forge .forge-check.is-done { background: var(--forge-surface); color: var(--forge-ok); box-shadow: inset 0 0 0 1.5px var(--forge-ok-fill); } /* Not answerable yet (forge.js gates Check until every open item has an answer). A faded accent fill read as "broken" or "still loading" — and dropping the label to 45% opacity put it under contrast. A neutral outline reads as "not yet" instead, and lets the button *fill in* with accent the moment the exercise becomes answerable: the state change is the cue. */ .fel-forge .forge-check:disabled { background: transparent; color: var(--forge-faint); box-shadow: inset 0 0 0 1.5px var(--forge-line); opacity: 1; cursor: not-allowed; transform: none; } /* Reset / try-again — icon-only. Same height and radius as Check so the two read as one control group; ghost so it never competes with the primary action. (As a text button it differed from Check in both size and shape, which looked accidental rather than deliberate.) */ .fel-forge .forge-reset { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: .9rem; line-height: 1.6; margin-left: .5rem; padding: .72em; /* Outline via inset shadow, not a border: a 1px border would make this 2px taller than Check, whose padding and line-height it otherwise matches exactly. */ border: 0; border-radius: .7rem; box-shadow: inset 0 0 0 1px var(--forge-line); background: transparent; color: var(--forge-muted); cursor: pointer; transition: color .15s, box-shadow .15s, background .15s; } .fel-forge .forge-reset svg { width: 1.6em; height: 1.6em; display: block; } .fel-forge .forge-reset:hover { color: var(--forge-accent-ink); box-shadow: inset 0 0 0 1px var(--forge-accent); background: var(--forge-soft); } /* ── Focus, once, for every control that takes the standard ring ─────────────────────────── WordPress core ships `:where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}`. Note `:focus`, NOT `:focus-visible` — so it fires on mouse clicks too and then sits there until you click elsewhere. It sets no colour, so the ring is `currentColor`, and what that looks like depends on the control it lands on: a dark box round a contents row, colliding with the rows 5px either side; an invisible white halo on a white-text button; a stray band between a button and its drop shadow. Anything focusable we don't name here inherits it. This was fixed four times in four places before it was written down once. The list below is both the fix and the register: a new interactive control goes in it. Controls that need a bespoke treatment style themselves next to their own rules — the gaps (fill + ring), the glosses (needs a radius, being inline) and the seek thumb. The register was still being kept by hand and still incomplete — the dictation Play and Slow buttons, the listening player's Slow and Reveal, the mobile contents button and the hint marker were all missing, which is why a tapped Play kept a **white** halo (its own `currentColor` on the accent fill) and a tapped Slow a dark one. So the rule below no longer names controls one by one: it takes every `