/* Measured sequential groups share one column count, keeping their tile sizes
   equal while missing/extra letters stay aligned at every width. */
.letter-feedback{margin:26px 0 18px;min-width:0;text-align:left}
.letter-feedback-spoken{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.letter-rows{display:grid;gap:22px;min-width:0;padding:4px 0 12px}
.letter-grid{--letter-gap:8px;display:grid;grid-template-columns:repeat(var(--letter-columns),minmax(0,1fr));gap:var(--letter-gap);width:min(100%,calc(var(--letter-columns)*64px + (var(--letter-columns) - 1)*var(--letter-gap)));min-width:0;margin-inline:auto;container-type:inline-size}
.letter-grid .letter-row-label{grid-column:1/-1;justify-self:start;margin:0;font-size:20px;line-height:1.4;font-weight:700;color:var(--wg-ink,#23312a);padding-top:5px}
.letter-tile{display:grid;place-items:center;min-width:0;width:100%;height:64px;box-sizing:border-box;border:2px solid var(--wg-line,#cfe0dd);border-radius:12px;background:#fff;font:400 18px/1.2 var(--wg-font,Andika,system-ui,sans-serif);color:var(--wg-ink,#23312a)}
/* Size letters from the grid itself, not the viewport. Keep a readable fallback
   on browsers without container units; tiles still fit through fluid tracks. */
@supports(font-size:1cqw){.letter-tile{font-size:clamp(18px,calc((100cqw - (var(--letter-columns) - 1)*var(--letter-gap))/var(--letter-columns)*.72),48px);height:clamp(36px,calc((100cqw - (var(--letter-columns) - 1)*var(--letter-gap))/var(--letter-columns)*1.25),80px)}}
.letter-row-label:nth-of-type(2)~.letter-same{background:var(--wg-same-soft,#eef5ec)}
.letter-swap,.letter-missing,.letter-extra{border:2px solid var(--wg-miss,#a8432a);background:var(--wg-miss-soft,#fce1d8);color:var(--wg-miss,#a8432a)}
.letter-grid>.letter-row-label:first-child~.letter-missing{border-style:dashed}
.letter-grid>.letter-row-label:nth-of-type(2)~.letter-missing{border-style:solid}
.letter-extra{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--wg-miss,#a8432a)}
.letter-gap{visibility:hidden}
.letter-feedback .letter-summary{font-size:18px;line-height:1.5;color:var(--wg-ink-soft,#4f5e55);margin:12px 0 0;text-align:center}
@media(max-width:600px){.letter-grid{--letter-gap:2px}.letter-tile{border-radius:7px}.letter-grid .letter-row-label{font-size:18px}.letter-feedback{margin:18px 0 12px}}

/* A revealed spelling is a learning aid, so use the same generous tiles as Fix it. */
.letter-reveal{width:min(100%,calc(var(--letter-columns)*80px + (var(--letter-columns) - 1)*var(--letter-gap)))}
.letter-reveal .letter-neutral{font-size:32px;height:76px;min-height:56px;border-radius:14px;background:#eef5ec}
@supports(font-size:1cqw){.letter-reveal .letter-neutral{font-size:clamp(24px,calc((100cqw - (var(--letter-columns) - 1)*var(--letter-gap))/var(--letter-columns)*.65),52px);height:clamp(56px,calc((100cqw - (var(--letter-columns) - 1)*var(--letter-gap))/var(--letter-columns)*1.2),94px)}}
@media(max-width:600px){.letter-reveal .letter-neutral{border-radius:9px}}

/* A spelling comparison can contain four rows on a short phone. These tiles
   are read, not tapped; keep the correction and Next visible together. */
@media(max-width:600px) and (max-height:740px){
 .letter-feedback:not(.letter-feedback-reveal){margin:8px 0}
 .letter-feedback:not(.letter-feedback-reveal) .letter-rows{gap:12px;padding:0 0 4px}
 .letter-feedback:not(.letter-feedback-reveal) .letter-row-label{font-size:18px;line-height:1.2;padding-top:2px}
 .letter-feedback:not(.letter-feedback-reveal) .letter-tile{height:48px;font-size:34px}
}