/* The character counter (/character-counter): the tools' page (tool.css) with one sheet in one column, as the letter
   generators (letters.css) set it: the text in a well, its characters, words and lines, then a row per network with what
   is left of its limit, a meter and how it counts, two columns where there is room. */
.chars .tool { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px; }
.chars .write { border-radius: 12px; background: var(--muted); transition: background .15s ease-out; }
.chars .write:focus-within { background: color-mix(in srgb, var(--muted) 92%, var(--foreground)); }
.chars .write textarea { min-height: 176px; padding: 20px 22px; border: 0; font-size: 18px; line-height: 1.5; resize: vertical; overflow: auto; }
.chars .tool .write textarea:focus-visible { outline: none; }

.totals { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 20px 0 0; }
.totals div { display: flex; align-items: baseline; gap: 8px; }
.totals dt { order: 2; font-size: 15px; color: var(--muted-foreground); }
.totals dd { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.nets-out { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; border-top: 1px solid var(--border); }
.net-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 20px; padding: 18px 0 20px; border-bottom: 1px solid var(--border); }
.net-row p { margin: 0; }
.net-row .what { font-size: 16px; }
.net-row .what b { font-weight: 600; }
.net-row .what span { color: var(--muted-foreground); }
.net-row .left { text-align: right; font-size: 14.5px; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.net-row .left b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); }
.net-row .meter { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.net-row .meter i { display: block; height: 100%; width: 0; background: var(--foreground); transition: width .15s ease-out; }
.net-row .how { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.45; color: var(--muted-foreground); }
.net-row.over .left b, .net-row.over .left span { color: var(--destructive); }
.net-row.over .meter i { background: var(--destructive); }

.chars .next { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.chars .next p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--foreground); }
.checked { font-size: 15px; color: var(--muted-foreground); }

@media (min-width: 960px) {
  .nets-out { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .nets-out .net-row:nth-child(-n+2) { border-top: 1px solid var(--border); }
}
@media (max-width: 759px) {
  .chars .tool { padding: 20px; }
  .chars .write textarea { min-height: 140px; font-size: 17px; }
  .totals { gap: 8px 28px; }
  .totals dd { font-size: 26px; }
  .chars .next { flex-direction: column; align-items: stretch; }
}