/* The bold and italic text generators (/bold-text-generator, /italic-text-generator): the tools' page (tool.css) with one
   sheet in one column. The text in a well, then a row per style holding the same text in that style and its Copy, then
   the note on screen readers, then the line about Flaghand and the pennant. */
.letters .tool { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px; }

.letters .write { border-radius: 12px; background: var(--muted); transition: background .15s ease-out; }
.letters .write:focus-within { background: color-mix(in srgb, var(--muted) 92%, var(--foreground)); }
.letters .write textarea { min-height: 136px; padding: 20px 22px; border: 0; font-size: 18px; line-height: 1.5; resize: vertical; overflow: auto; }
.letters .tool .write textarea:focus-visible { outline: none; }

/* A row per style: its name over the text in it, Copy beside them. */
.out { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--border); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.row .name { grid-column: 1; margin: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.row .said {
  grid-column: 1; display: block; max-height: 9em; overflow: auto; font-size: 22px; line-height: 1.45; color: var(--foreground);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.row .said.sample { color: var(--muted-foreground); }
.row .copy {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 96px; padding: 0 20px;
  border: 0; border-radius: 12px; background: var(--foreground); color: var(--background); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: opacity .15s ease-out;
}
.row .copy:hover { opacity: .88; }
.row .copy:disabled { opacity: .35; cursor: default; }

.letters .note { margin: 20px 0 0; max-width: 680px; font-size: 15px; line-height: 1.5; color: var(--foreground-soft); }
.letters .next { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.letters .next p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--foreground); }

@media (max-width: 759px) {
  .letters .tool { padding: 20px; }
  .letters .write textarea { min-height: 120px; font-size: 17px; }
  .row { gap: 4px 16px; }
  .row .said { font-size: 19px; }
  .row .copy { min-width: 80px; padding: 0 16px; height: 48px; }
  .letters .next { flex-direction: column; align-items: stretch; }
}