/* Embedded Typing application for fklavye.net. Scoped to the registered mount. */
.typing-embed {
    --typing-ink: var(--wb-public-text, currentColor);
    --typing-muted: var(--wb-public-muted, color-mix(in srgb, currentColor 64%, transparent));
    --typing-line: var(--wb-public-border, color-mix(in srgb, currentColor 18%, transparent));
    --typing-surface: var(--wb-public-surface, transparent);
    --typing-accent: var(--wb-public-primary, var(--wb-primary, #176b3a));
    --typing-accent-soft: color-mix(in srgb, var(--typing-accent) 14%, transparent);
    --typing-error: var(--wb-public-danger, #b42318);
    --typing-error-soft: color-mix(in srgb, var(--typing-error) 14%, transparent);
    color: var(--typing-ink);
    margin-inline: auto;
    max-width: 62rem;
    width: 100%;
}

.typing-embed [hidden] { display: none !important; }
.typing-embed__intro { margin-bottom: 2rem; max-width: 44rem; }
.typing-embed__eyebrow { color: var(--typing-accent); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.typing-embed__intro h1 { font-size: clamp(2rem, 6vw, 3.65rem); letter-spacing: -.045em; line-height: 1.02; margin-block: .5rem 1rem; }
.typing-embed__intro p:last-child { color: var(--typing-muted); font-size: 1.05rem; line-height: 1.7; }
.typing-embed__controls { align-items: end; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.typing-embed__field label,.typing-embed__label { display: block; font-size: .875rem; font-weight: 650; margin-bottom: .4rem; }
.typing-embed__select,.typing-embed__input { background: var(--typing-surface); border: 1px solid var(--typing-line); border-radius: var(--wb-radius-md, .5rem); color: inherit; font: inherit; width: 100%; }
.typing-embed__select { min-height: 2.75rem; padding: .55rem .75rem; }
.typing-embed__static { align-items: center; background: color-mix(in srgb, var(--typing-surface) 88%, var(--typing-ink) 5%); border: 1px solid var(--typing-line); border-radius: var(--wb-radius-md, .5rem); display: flex; min-height: 2.75rem; padding: .55rem .75rem; }
.typing-embed__stats { border-block: 1px solid var(--typing-line); display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.5rem; }
.typing-embed__stat { padding: 1rem .75rem; }
.typing-embed__stat + .typing-embed__stat { border-left: 1px solid var(--typing-line); }
.typing-embed__value,.typing-embed__stat-label { display: block; }
.typing-embed__value { font-size: clamp(1.25rem, 3vw, 1.75rem); font-variant-numeric: tabular-nums; font-weight: 700; }
.typing-embed__stat-label { color: var(--typing-muted); font-size: .75rem; margin-top: .15rem; }
.typing-embed__stage { background: var(--typing-surface); border: 1px solid var(--typing-line); border-radius: 1rem; padding: clamp(1.25rem, 4vw, 2rem); }
.typing-embed__status { color: var(--typing-muted); display: flex; flex-wrap: wrap; font-size: .78rem; justify-content: space-between; margin-bottom: 1.15rem; }
.typing-embed__status [data-status] { color: var(--typing-accent); font-weight: 700; }
.typing-embed__prompt { color: var(--typing-muted); font-size: clamp(1.15rem, 2.8vw, 1.5rem); line-height: 1.85; margin-bottom: 1.5rem; min-height: 8.5rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.typing-embed__character { border-radius: .15rem; }
.typing-embed__character.is-correct { color: var(--typing-ink); }
.typing-embed__character.is-incorrect { background: var(--typing-error-soft); color: var(--typing-error); text-decoration: underline 2px; }
.typing-embed__character.is-current { background: var(--typing-accent-soft); box-shadow: inset 2px 0 var(--typing-accent); color: var(--typing-ink); }
.typing-embed__input { line-height: 1.6; min-height: 7rem; padding: .75rem; resize: vertical; }
.typing-embed__input:focus { border-color: var(--typing-accent); box-shadow: 0 0 0 3px var(--typing-accent-soft); outline: 0; }
.typing-embed__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.typing-embed__button { background: var(--typing-accent); border: 1px solid var(--typing-accent); border-radius: var(--wb-radius-md, .5rem); color: var(--wb-public-on-primary, #fff); cursor: pointer; font: inherit; font-weight: 650; padding: .65rem 1rem; }
.typing-embed__button--secondary { background: transparent; color: var(--typing-ink); }
.typing-embed__result { border: 1px solid var(--typing-line); border-radius: 1rem; margin-top: 1.5rem; padding: 1.25rem; }
.typing-embed__result h2 { margin-top: 0; }
.typing-embed__result-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.typing-embed__result-grid div { background: color-mix(in srgb, var(--typing-surface) 88%, var(--typing-ink) 5%); border-radius: .65rem; padding: 1rem; }
.typing-embed__result-grid strong,.typing-embed__result-grid span { display: block; }
.typing-embed__result-grid strong { font-size: 1.5rem; }
.typing-embed__result-grid span,.typing-embed__privacy { color: var(--typing-muted); font-size: .8rem; }
.typing-embed__privacy { margin-top: 1.25rem; }

@media (max-width: 640px) {
    .typing-embed__controls { grid-template-columns: 1fr; }
    .typing-embed__stats,.typing-embed__result-grid { grid-template-columns: repeat(2, 1fr); }
    .typing-embed__stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--typing-line); }
    .typing-embed__stat:nth-child(4) { border-top: 1px solid var(--typing-line); }
}