/* The same completion review is used in the Hub and permanent saved reviews. */
.det-completion-review {
    --det-completion-ink: #203b2e;
    --det-completion-muted: #626f67;
    --det-completion-line: #dfe7e0;
    --det-completion-good: #256646;
    --det-completion-good-bg: #e9f3eb;
    --det-completion-bad: #a03f34;
    --det-completion-bad-bg: #fbece8;
    --det-completion-neutral-bg: #f0f3ef;
    --det-completion-paper: #fff;
    --det-completion-action: #3b604a;
    --det-completion-on-action: #fff;
    border-top: 1px solid var(--det-completion-line);
    color: var(--det-completion-ink);
    padding: 1.25rem 0;
    overflow-wrap: anywhere;
}
html[data-det-theme="dark"] .det-completion-review,
body.dark-mode .det-completion-review {
    --det-completion-ink: #edf1ec;
    --det-completion-muted: #b7c4ba;
    --det-completion-line: #34473a;
    --det-completion-good: #b0d6b8;
    --det-completion-good-bg: #294031;
    --det-completion-bad: #f0b7ac;
    --det-completion-bad-bg: #412e2b;
    --det-completion-neutral-bg: #28322c;
    --det-completion-paper: #19211c;
    --det-completion-action: #b0d6b8;
    --det-completion-on-action: #192b20;
}
.det-completion-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; color: var(--det-completion-muted); font-size: .8125rem; }
.det-completion-status { display: inline-flex; gap: .375rem; align-items: center; color: var(--det-completion-good); font-weight: 500; }
.det-completion-status svg { flex: 0 0 1rem; width: 1rem; height: 1rem; }
.det-completion-review .det-completion-sentence { margin: 1rem 0 .5rem; font-size: 1.0625rem; line-height: 1.9; color: var(--det-completion-ink); white-space: pre-wrap; }
.det-completion-word { overflow-wrap: anywhere; }
.det-completion-added { color: var(--det-completion-good); background: var(--det-completion-good-bg); border-bottom: 2px solid currentColor; border-radius: 3px 3px 0 0; padding: 2px 1px; font-weight: 500; }
.det-completion-review .det-completion-correction { margin: 1rem 0 1.25rem; padding: .875rem 1rem; background: var(--det-completion-neutral-bg); border-radius: .5rem; color: var(--det-completion-ink); font-size: .9375rem; }
.det-completion-review .det-completion-correction p { margin: .125rem 0 .25rem; }
.det-completion-small-label { color: var(--det-completion-muted); font-size: .8125rem; }
.det-completion-word-change { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; font-size: 1.1875rem; }
.det-completion-word-change del { color: var(--det-completion-bad); background: var(--det-completion-bad-bg); }
.det-completion-word-change ins { color: var(--det-completion-good); background: var(--det-completion-good-bg); text-decoration: none; border-bottom: 2px solid currentColor; }
.det-completion-learning { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.25rem; }
.det-completion-review h4 { color: var(--det-completion-ink); font-size: .9375rem; font-weight: 500; line-height: 1.5; margin: 0 0 .5rem; }
.det-completion-learning p, .det-completion-learning blockquote { margin: 0; font-size: .875rem; line-height: 1.75; color: var(--det-completion-ink); }
.det-completion-learning p + p { margin-top: .5rem; }
.det-completion-example { padding-left: 1.5rem; border-left: 1px solid var(--det-completion-line); }
.det-completion-example blockquote { padding: 0; border: 0; }
.det-completion-example strong { color: var(--det-completion-good); font-weight: 500; }
.det-completion-review .det-completion-tip { border-left: 2px solid var(--det-completion-good); padding-left: .75rem; margin: 1rem 0; color: var(--det-completion-muted); font-size: .8125rem; line-height: 1.75; }
.det-completion-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1.25rem; border-top: 1px solid var(--det-completion-line); margin-top: 1.25rem; padding-top: .5rem; }
.det-completion-footer:has(.det-completion-practice[open]) { display: block; }
.det-completion-help, .det-completion-explanation { font-size: .875rem; line-height: 1.75; }
.det-completion-review .det-completion-explanation { margin: .75rem 0; }
.det-completion-learning .det-completion-explanation { margin: .5rem 0 0; }
.det-completion-clue { background: var(--det-completion-good-bg); color: var(--det-completion-ink); padding: 1px 2px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.det-completion-worked { margin-top: 1.25rem; }
.det-completion-worked > h4 { margin-bottom: 1rem; }
.det-completion-steps { list-style: none; padding: 0; margin: 0; counter-reset: det-completion-step; }
.det-completion-steps li { counter-increment: det-completion-step; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .875rem; padding-bottom: 1rem; }
.det-completion-steps li:last-child { padding-bottom: 0; }
.det-completion-steps li::before { content: counter(det-completion-step); display: flex; align-items: center; justify-content: center; border: 1px solid var(--det-completion-line); border-radius: 50%; width: 1.5rem; height: 1.5rem; margin-top: .0625rem; color: var(--det-completion-muted); font-size: .75rem; }
.det-completion-review .det-completion-worked h5 { margin: 0 0 .25rem; color: var(--det-completion-ink); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.det-completion-review .det-completion-worked p { margin: 0; color: var(--det-completion-ink); font-size: .875rem; line-height: 1.75; }
.det-completion-worked strong { color: var(--det-completion-good); font-weight: 500; }
.det-completion-review .det-completion-word-build { margin-top: .5rem; color: var(--det-completion-muted); font-size: 1rem; }
.det-completion-transfer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; border-top: 1px solid var(--det-completion-line); margin-top: 1.25rem; padding-top: 1.125rem; }
.det-completion-transfer > div + div { border-left: 1px solid var(--det-completion-line); padding-left: 1.25rem; }
.det-completion-review .det-completion-transfer-why { font-size: .8125rem; color: var(--det-completion-muted); margin-top: .375rem; }
.det-completion-review .det-completion-worked-status { color: var(--det-completion-muted); font-size: .8125rem; margin: 1rem 0; }
.det-completion-worked-status button { border: 0; background: transparent; color: var(--det-completion-good); text-decoration: underline; padding: .25rem; font: inherit; cursor: pointer; }
.det-completion-details { color: var(--det-completion-muted); font-size: .8125rem; margin-top: .75rem; }
.det-completion-details summary { width: fit-content; padding: .375rem 0; cursor: pointer; }
.det-completion-details dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--det-completion-line); padding: .75rem 0 0; margin: .5rem 0 0; }
.det-completion-details dt { color: var(--det-completion-muted); margin: 0 0 .125rem; }
.det-completion-details dd { color: var(--det-completion-ink); font-size: .9375rem; margin: 0; }
.det-completion-practice { flex: 1; margin-top: .75rem; }
.det-completion-practice > summary, .det-completion-practice button { background: var(--det-completion-action); color: var(--det-completion-on-action); border: 1px solid var(--det-completion-action); border-radius: 6px; padding: .625rem .875rem; font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer; width: fit-content; }
.det-completion-practice > summary { margin-left: auto; }
.det-completion-practice-content { border-top: 1px solid var(--det-completion-line); padding-top: 1.25rem; margin-top: 1.25rem; }
.det-completion-review .det-completion-practice-note { color: var(--det-completion-muted); font-size: .8125rem; margin: 0 0 .75rem; }
.det-completion-practice label { display: block; font-size: .9375rem; line-height: 2.5; color: var(--det-completion-ink); }
.det-completion-practice input { width: 5.5em; max-width: 100%; margin: 0 .125rem; padding: .375rem .5rem; border: 1px solid var(--det-completion-line); border-radius: 5px; background: var(--det-completion-paper); color: var(--det-completion-ink); font: inherit; font-size: 1rem; line-height: 1.4; }
.det-completion-practice button { margin-top: .75rem; }
.det-completion-review .det-completion-practice-message { color: var(--det-completion-good); font-size: .875rem; margin: .75rem 0 0; }
.det-completion-practice-message[data-state="retry"] { color: var(--det-completion-bad); }
[data-det-completion-state="incorrect"] .det-completion-added,
[data-det-completion-state="partial"] .det-completion-added { color: var(--det-completion-bad); background: var(--det-completion-bad-bg); border-bottom-style: dashed; }
[data-det-completion-state="incorrect"] .det-completion-status,
[data-det-completion-state="partial"] .det-completion-status { color: var(--det-completion-bad); }
[data-det-completion-state="unanswered"] .det-completion-added { color: var(--det-completion-muted); background: var(--det-completion-neutral-bg); border-bottom-style: dashed; }
[data-det-completion-state="unanswered"] .det-completion-status { color: var(--det-completion-muted); }
@media (max-width: 600px) {
    .det-completion-learning { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .det-completion-example { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--det-completion-line); }
    .det-completion-transfer { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
    .det-completion-transfer > div + div { border-left: 2px solid var(--det-completion-good); padding-left: .75rem; }
}
@media (pointer: coarse) { .det-completion-details summary, .det-completion-practice > summary, .det-completion-practice button { min-height: 44px; align-content: center; } }