/* Local, opaque semantic surfaces keep measured text contrast independent of site palettes. */
[data-sentence-translations] {
    --sentence-correct-bg: #102b20;
    --sentence-correct-text: #a7f3c2;
    --sentence-correct-border: #4ade80;
    --sentence-incorrect-bg: #381b20;
    --sentence-incorrect-text: #fecdd3;
    --sentence-incorrect-border: #fb7185;
    --sentence-hint-bg: #142b46;
    --sentence-hint-text: #bfdbfe;
    --sentence-hint-border: #60a5fa;
    --sentence-neutral-bg: #342a12;
    --sentence-neutral-text: #fde68a;
    --sentence-neutral-border: #fbbf24;
    --sentence-stats-bg: #12202d;
    --sentence-stats-text: #e2e8f0;
    --sentence-stats-border: #64748b;
}

:root[data-theme="light"] [data-sentence-translations] {
    --sentence-correct-bg: #ecfdf3;
    --sentence-correct-text: #166534;
    --sentence-correct-border: #15803d;
    --sentence-incorrect-bg: #fff1f2;
    --sentence-incorrect-text: #9f1239;
    --sentence-incorrect-border: #be123c;
    --sentence-hint-bg: #eff6ff;
    --sentence-hint-text: #1e40af;
    --sentence-hint-border: #2563eb;
    --sentence-neutral-bg: #fffbeb;
    --sentence-neutral-text: #854d0e;
    --sentence-neutral-border: #a16207;
    --sentence-stats-bg: #f8fafc;
    --sentence-stats-text: #1e293b;
    --sentence-stats-border: #64748b;
}

[data-sentence-translations] .task_form_row {
    --sentence-row-bg: var(--surface-card);
    --sentence-row-text: var(--text-primary);
    --sentence-row-border: var(--surface-border);
    min-width: 0;
    max-width: 100%;
    background: var(--sentence-row-bg);
    color: var(--sentence-row-text);
    border: 1px solid var(--sentence-row-border);
    overflow-wrap: anywhere;
}

[data-sentence-translations] .task_form_row.is-correct {
    --sentence-row-bg: var(--sentence-correct-bg);
    --sentence-row-text: var(--sentence-correct-text);
    --sentence-row-border: var(--sentence-correct-border);
    background: var(--sentence-row-bg);
    color: var(--sentence-row-text);
    border-color: var(--sentence-row-border);
}

[data-sentence-translations] .task_form_row.is-incorrect {
    --sentence-row-bg: var(--sentence-incorrect-bg);
    --sentence-row-text: var(--sentence-incorrect-text);
    --sentence-row-border: var(--sentence-incorrect-border);
    background: var(--sentence-row-bg);
    color: var(--sentence-row-text);
    border-color: var(--sentence-row-border);
}

[data-sentence-translations] .task_form_row[data-sentence-status="needs_review"],
[data-sentence-translations] .task_form_row[data-sentence-status="pending"] {
    --sentence-row-bg: var(--sentence-neutral-bg);
    --sentence-row-text: var(--sentence-neutral-text);
    --sentence-row-border: var(--sentence-neutral-border);
    border-style: dashed;
}

[data-sentence-translations] .task_form_row label { color: var(--sentence-row-text); }

[data-sentence-translations] .task_form_row .answer,
[data-sentence-translations] .task_form_row.answer-visible .answer,
[data-sentence-translations] .task_form_row .answer[hidden] { display: none; }

[data-sentence-translations] .task_form_row.answer-visible .answer:not([hidden])[data-sentence-reference] {
    display: block;
    background: var(--sentence-row-bg);
    color: var(--sentence-row-text);
    border: 1px solid var(--sentence-row-border);
}

[data-sentence-translations] .task_form_input_row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
}

[data-sentence-translations] .task_form_row input,
[data-sentence-translations] .task_form_row textarea {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    background: var(--sentence-row-bg);
    color: var(--sentence-row-text);
    border-color: var(--sentence-row-border);
}

[data-sentence-translations] .task_form_row .task_form_row_check,
[data-sentence-translations] .sentence-translation-hint,
[data-sentence-translations] [data-sentence-statistics-retry] {
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    line-height: 1.4;
    background: var(--sentence-stats-bg);
    color: var(--sentence-stats-text);
    border: 1px solid var(--sentence-stats-border);
    border-radius: 0.8rem;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

[data-sentence-translations] .sentence-translation-hint {
    margin-top: 0.65rem;
    text-align: left;
    background: var(--sentence-hint-bg);
    color: var(--sentence-hint-text);
    border-color: var(--sentence-hint-border);
}

[data-sentence-translations] .sentence-translation-lexical-hint {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--sentence-hint-border);
    border-radius: 0.8rem;
    background: var(--sentence-hint-bg);
    color: var(--sentence-hint-text);
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

[data-sentence-translations] .sentence-translation-lexical-hint[hidden] { display: none; }

[data-sentence-translations] .task_form_row button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

[data-sentence-translations] .task_form_row :is(button, input, textarea, a):focus-visible,
[data-sentence-translations] [data-sentence-statistics-retry]:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}

[data-sentence-translations] .sentence-translation-feedback {
    margin-top: 0.65rem;
    padding: 0.6rem 0;
    color: var(--sentence-row-text);
    background: var(--sentence-row-bg);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

[data-sentence-translations] .sentence-translation-feedback:empty { display: none; }
[data-sentence-translations] .sentence-translation-feedback p { margin: 0.35rem 0 0; color: inherit; }
[data-sentence-translations] .sentence-translation-feedback a {
    display: inline-block;
    margin: 0.4rem 0 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

[data-sentence-translations] .sentence-statistics {
    min-width: 0;
    margin-top: 2rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--sentence-stats-border);
    border-radius: 1rem;
    background: var(--sentence-stats-bg);
    color: var(--sentence-stats-text);
    overflow-wrap: anywhere;
}

[data-sentence-translations] .sentence-statistics :is(h2, h3, p, dt, dd, li, strong, span) { color: inherit; }
[data-sentence-translations] .sentence-statistics h2 { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 700; }
[data-sentence-translations] .sentence-statistics h3 { margin: 1.2rem 0 0.6rem; font-size: 1.05rem; font-weight: 700; }
[data-sentence-translations] .sentence-statistics p { line-height: 1.6; }
[data-sentence-translations] .sentence-statistics__levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
[data-sentence-translations] .sentence-statistics__level { min-width: 0; }
[data-sentence-translations] .sentence-statistics__metrics { margin: 0; }
[data-sentence-translations] .sentence-statistics__metrics > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--sentence-stats-border); }
[data-sentence-translations] .sentence-statistics__metrics dt { min-width: 0; }
[data-sentence-translations] .sentence-statistics__metrics dd { margin: 0; max-width: 100%; flex-shrink: 0; font-weight: 700; text-align: right; }
[data-sentence-translations] .sentence-statistics__explanation { font-size: 0.9rem; }
[data-sentence-translations] .sentence-statistics__errors { padding: 0; margin: 0; list-style: none; }
[data-sentence-translations] .sentence-statistics__errors li { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
[data-sentence-translations] .sentence-statistics [hidden] { display: none; }

@media (max-width: 640px) {
    [data-sentence-translations] .sentence-statistics__levels { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    [data-sentence-translations] .sentence-statistics__metrics > div { flex-wrap: wrap; gap: 0.3rem 1rem; }
}

@media (max-width: 480px) {
    /* Legacy nowrap grammar tables must not stretch the surrounding exercise page. */
    [data-sentence-translations] .rule-table-figure {
        width: 100%; min-width: 0; max-width: 100%; margin-inline: 0;
    }
    [data-sentence-translations] .legacy-lesson .rule-table {
        display: table; table-layout: fixed; white-space: normal;
    }
    [data-sentence-translations] .legacy-lesson .rule-table :is(th, td) {
        min-width: 0; overflow-wrap: anywhere; white-space: normal;
    }
    [data-sentence-translations] .task_form_row { padding: 0.8rem; }
    [data-sentence-translations] .task_form_input_row { grid-template-columns: minmax(0, 1fr); }
    [data-sentence-translations] .task_form_row .task_form_row_check,
    [data-sentence-translations] .sentence-translation-hint { width: 100%; }
}