.comma-tool { max-width: 54rem; margin-bottom: 2.5rem; }
.comma-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .65rem; }
.comma-controls label { display: grid; min-width: 0; max-width: 100%; gap: .25rem; font-weight: 650; }
.comma-controls select, .comma-controls [data-comma-next] {
  min-height: 3.25rem; min-width: 0; max-width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--site-line); border-radius: .55rem; background: var(--site-paper); color: var(--site-ink); font: inherit;
}
.comma-controls button { cursor: pointer; font-family: inherit; }
.comma-tool [data-comma-status] { min-height: 1.45rem; margin: .4rem 0; color: var(--site-muted); }
.comma-paper, .comma-key { padding: clamp(1rem, 4vw, 2.1rem); border: 1px solid var(--site-line); border-radius: .7rem; background: white; }
.comma-paper h2, .comma-key h2 { margin: 0 0 .6rem; line-height: 1.2; }
.comma-paper ol, .comma-key ol { margin: 0; padding-inline-start: 1.5em; }
.comma-paper li, .comma-key li { margin-bottom: .55rem; break-inside: avoid; }
.comma-line { display: block; min-height: 1.7rem; border-bottom: 1px solid #929a92; }
.comma-key { margin-top: .85rem; padding: .75rem 1rem; }
.comma-key summary { min-height: 2.75rem; padding-block: .55rem; font-weight: 650; cursor: pointer; }

@media (max-width: 32rem) {
  .comma-controls label, .comma-controls button { width: 100%; }
}
@media print {
  @page { size: A4; margin: 13mm; }
  .comma-controls, [data-comma-status], .comma-key, body:has(.comma-tool) .statistics-preference { display: none !important; }
  .comma-tool, .comma-paper, .comma-key { margin: 0; padding: 0; max-width: none; border: 0; color: black; font-size: 11pt; }
  .comma-line { min-height: 7mm; }
  .comma-tool[data-scope="answers"] .comma-paper { display: none; }
  .comma-tool[data-scope="both"] .comma-key, .comma-tool[data-scope="answers"] .comma-key { display: block !important; }
  .comma-tool[data-scope="both"] .comma-key { break-before: page; }
  .comma-key summary { display: none; }
}