@layer block {
    .word-counter {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);

        & .word-counter__field {
            display: flex;
            align-items: flex-end;
            gap: var(--space-2);
        }

        & .word-counter__textarea {
            flex: 1;
            font-family: var(--font-display);
            font-size: var(--text-display-story);
            font-weight: var(--weight-display);
            line-height: var(--leading-display);
            color: var(--color-text);
            background: transparent;
            border: none;
            outline: none;
            resize: none;
            min-height: 5rem;
            letter-spacing: -0.01em;

            &::placeholder {
                color: var(--color-outline-variant);
                font-weight: var(--weight-body);
            }
        }

        & .word-counter__ring {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-bottom: 0.25rem;
        }

        & .word-counter__track {
            fill: none;
            stroke: var(--color-outline-variant);
            stroke-width: 3;
        }

        /* The arc has to read as progress while it grows, so it cannot share the
           track's colour — an invisible fill looks like a ring that only lights
           up at six words. */
        & .word-counter__fill {
            fill: none;
            stroke: var(--color-text-muted);
            stroke-width: 3;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset var(--transition-normal), stroke var(--transition-fast);
        }

        & .word-counter__display {
            position: absolute;
            font-family: var(--font-ui);
            font-size: 0.625rem;
            font-weight: var(--weight-label);
            color: var(--color-text-muted);
            line-height: 1;
        }

        & .word-counter__hint {
            align-self: flex-end;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-family: var(--font-ui);
            font-size: 0.625rem;
            font-weight: var(--weight-label);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            opacity: 0.7;
            transition: opacity var(--transition-fast);

            /* An author `display` beats the UA stylesheet, so [hidden] needs saying out loud. */
            &[hidden] { display: none; }
        }

        & .word-counter__key {
            font-family: inherit;
            font-size: inherit;
            line-height: 1;
            padding: 0.15rem 0.3rem;
            border: 1px solid var(--color-outline-variant);
            border-radius: var(--radius-sm);
            color: var(--color-text-muted);
        }

        /* The shortcut only exists where there are keys to press. */
        @media (pointer: coarse) {
            & .word-counter__hint { display: none; }
        }

        &:focus-within .word-counter__hint {
            opacity: 1;
        }

        &[data-state="exact"] {
            & .word-counter__fill { stroke: var(--color-accent); }
            & .word-counter__display { color: var(--color-accent); }
        }

        &[data-state="over"] {
            & .word-counter__fill { stroke: var(--color-error); }
            & .word-counter__display { color: var(--color-error); }
        }
    }
}