/* Read-aloud check. Phone first: the article frame is 311 px on a phone and 700 px on a computer. */
h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; margin: 18px 0 8px; }
textarea {
  width: 100%; min-height: 9rem; padding: 10px 12px; font: inherit; font-size: 0.9375rem; line-height: 1.45;
  color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; resize: vertical;
}
select {
  width: 100%; max-width: 22rem; height: 44px; padding: 0 10px; font: inherit; font-size: 1rem;
  color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
}
.actions { margin: 6px 0 0; }
.message { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.report { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.report > p { margin: 0 0 10px; }
.copy { padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); font-size: 0.9375rem; }
.length { font-weight: 600; }
.issues { list-style: none; margin: 0; padding: 0; }
.issue { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.issue-head { margin: 0 0 6px; }
.count {
  display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: #fff4e5; color: #7a4100;
  font-size: 0.8125rem; font-weight: 700; text-align: center;
}
.examples { margin: 0 0 6px; padding-left: 1.1rem; font-size: 0.875rem; color: var(--muted); overflow-wrap: anywhere; }
.examples li { margin-bottom: 4px; }
mark { background: #ffe8a3; color: var(--text); padding: 0 2px; border-radius: 3px; }
.fix { margin: 0; font-size: 0.9375rem; }
.rules, .questions { padding: 10px 12px; border-radius: 8px; background: #fff4e5; color: #7a4100; font-size: 0.9375rem; }
.route { margin: 0 0 14px; padding-left: 1.1rem; font-size: 0.9375rem; }
.route li { margin-bottom: 8px; }
.route.verbatim-first #route-verbatim { font-weight: 700; }
[hidden] { display: none !important; }
@media (min-width: 600px) { h1 { font-size: 1.375rem; } }