/* Character Counter — the editor card beside an inspector (layout from
   styles/components/form.css): the stats as two-up stat tiles over the Copy
   stats tray, the character limit (preset pill, custom field, progress bar)
   and the top words as rows. The editor is styles/components/editor.css; only
   the limit bar and the word rows' type are the page's own. */

textarea.cc-input {
  min-height: 58vh;
}

/* input.<class>: the shared form rule input[type="…"] is (0,1,1). */
input.cc-custom { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* Limit progress — a thin bar over the used / max count. */
.cc-limit__bar {
  height: 4px;
  background: var(--bg-fill);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cc-limit__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition:
    width 0.15s var(--ease-standard),
    background 0.15s var(--ease-standard);
}
.cc-limit.is-warning .cc-limit__fill { background: var(--warning); }
.cc-limit.is-over    .cc-limit__fill { background: var(--danger); }

.cc-limit__count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -0.01em;
}
.cc-limit.is-over .cc-limit__count { color: var(--danger); }

/* Top words — the ordered list is the card, each word a row. */
.cc-top { list-style: none; margin: 0; padding: 0; }
.cc-top__word {
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.cc-top__count { color: var(--text-muted); }