.coql-rules main { max-width: 76rem; margin-inline: auto; padding-block: 1.5rem 3rem; }
.coql-rules h1 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
#rules-editor-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin: 1rem 0; }
#rules-editor-controls span { font-size: .85rem; color: var(--matches-muted); }
#rules-content { margin-top: 1.5rem; line-height: 1.65; overflow-wrap: anywhere; }
#rules-content > :first-child { margin-top: 0; }
#rules-content h2 { margin-top: 1.75rem; }
#rules-content pre { max-width: 100%; overflow-x: auto; }
#rules-content table { width: auto; max-width: 100%; }
#rules-content iframe { max-width: 100%; aspect-ratio: 16 / 9; border: 0; }
#rules-editor { width: min(65rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; }
#rules-editor-form { display: grid; gap: .65rem; }
#rules-editor-form h2 { margin: 0 0 .5rem; }
#rules-edit-content { width: 100%; min-width: 0; resize: vertical; font-family: ui-monospace, monospace; }
#rules-format { justify-self: start; }
.rules-editor-actions { display: flex; gap: .6rem; }
.coql-rules .error { color: #c7465d; }