/* Schreib-Check: underlines on the learner's own text, plus the summary card. */

.wc { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; min-width: 0; }
.input-group > .wc { flex: 1 1 auto; }
.wc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.wc-live { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); color: var(--muted); }
.wc-stage { position: relative; }
.wc-mirror {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: transparent;
  border-color: transparent;
}
.wc-stage textarea,
.wc-stage input { position: relative; z-index: 1; background: transparent; }
.wc-mark {
  pointer-events: auto;
  cursor: pointer;
  border-bottom: 2px solid currentColor;
  border-radius: 2px;
}
.wc-mark--spelling { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.wc-mark--grammar { color: var(--signal-text); background: color-mix(in srgb, var(--signal) 28%, transparent); }
.wc-mark--style { color: var(--mastery); background: color-mix(in srgb, var(--mastery) 16%, transparent); }
.wc-mark--punctuation { color: var(--ink); background: color-mix(in srgb, var(--line-strong) 70%, transparent); }
.wc-mark--task { color: var(--signal-text); background: color-mix(in srgb, var(--signal) 18%, transparent); }
.wc-mark.is-on { outline: 2px solid var(--signal); outline-offset: 1px; }

.wc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.wc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  padding: var(--s-1) var(--s-2);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-pill, 999px);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
}
.wc-chip .icon { width: 1em; height: 1em; }
.wc-chip--spelling { border-color: var(--danger); }
.wc-chip--grammar { border-color: var(--signal); }
.wc-chip--style { border-color: var(--mastery); }
.wc-chip--punctuation { border-color: var(--line-strong); }
.wc-chip--task { border-color: var(--signal); }
.wc-chip.is-on { background: var(--paper-sunk); }

.wc-banner { margin: 0; }
.wc-pop {
  padding: var(--s-3);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-card, 12px);
  background: var(--card);
}
.wc-pop__label { margin: 0 0 var(--s-2); font-weight: 600; }
.wc-pop__detail, .wc-pop__answer { margin: 0 0 var(--s-2); }
.wc-pop__likely { color: var(--muted); font-weight: 500; }
.wc-summary { padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-card, 12px); background: var(--paper-sunk); }
.wc-summary h3 { margin: 0 0 var(--s-2); font-size: var(--fs-16); }
.wc-counts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.wc-counts li { font-size: var(--fs-14); }
.wc-exam { margin: 0 0 var(--s-2); }

.wc-report .wc-text { white-space: pre-wrap; overflow-wrap: break-word; }
.wc-report .wc-mark { color: inherit; }