/* X character counter: progress ring and thread posts. */
.tc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
@media (max-width: 560px) { .tc-top { grid-template-columns: 1fr; } .tc-meter { flex-direction: row; justify-content: flex-start; } }
.tc-meter { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tc-ring-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.tc-ring-wrap svg { width: 120px; height: 120px; display: block; }
.tc-ring #tc-ring-bar { stroke: var(--accent); transition: stroke-dasharray 0.15s ease, stroke 0.15s; }
.tc-ring.warn #tc-ring-bar { stroke: #d68c14; }
.tc-ring.over #tc-ring-bar { stroke: var(--err); }
.tc-left { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.tc-ring-wrap:has(.tc-ring.over) .tc-left { color: var(--err); }
mark.tc-over { background: var(--err-soft); color: var(--err); }
.tc-post-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.97rem; }
#tc-overflow { font-family: var(--font); max-height: 260px; }
#tool .grid-2 > .stack-sm, #tool .grid-2 > .stack, .tc-top > .stack-sm { align-content: start; }