/* regex-tester: pattern row, flags, highlighted view and the matches table. Family styles in ../text-tools.css. */
.matrix-ui .regex-pattern { font-family: var(--matrix-font-mono); width: 100%; box-sizing: border-box; }
/* the error under the field is read as the page's text, not a caption (queue row 115, T38-02: it was 13 px) */
.regex-error { margin: 0; min-height: 0; font-size: var(--matrix-type-body); }
.regex-error:empty { display: none; }
.regex-flags { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8) var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-16); margin: 0; }
.regex-flags legend { font-weight: 600; padding-inline: 4px; }
.regex-flag { display: inline-flex; align-items: center; gap: var(--matrix-space-8); min-height: 32px; }
.regex-flag input { width: 20px; height: 20px; margin: 0; accent-color: var(--matrix-brand); }
.regex-flag label::first-letter { font-family: var(--matrix-font-mono); font-weight: 700; }
.regex-view { margin: 0; padding: var(--matrix-space-12); max-height: 40vh; overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); font-family: var(--matrix-font-mono); font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.regex-m { background: color-mix(in srgb, var(--matrix-brand) 28%, transparent); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--matrix-brand) 45%, transparent); }
.regex-m--alt { background: color-mix(in srgb, var(--matrix-success) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--matrix-success) 50%, transparent); }
.regex-scroll { margin-top: var(--matrix-space-12); max-height: 50vh; overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.regex-table { width: 100%; border-collapse: collapse; font-family: var(--matrix-font-mono); font-size: 0.875rem; line-height: 1.5; }
.regex-table th { position: sticky; top: 0; background: var(--matrix-surface-subtle); color: var(--matrix-muted); font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); white-space: nowrap; }
.regex-table td { padding: 2px 8px; vertical-align: top; border-bottom: 1px solid var(--matrix-border); }
.regex-table .regex-num { text-align: right; color: var(--matrix-muted); white-space: nowrap; width: 1%; }
.regex-table .regex-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.result h3 { margin: var(--matrix-space-16) 0 var(--matrix-space-8); font-size: var(--matrix-type-control); }
.regex-why { margin: var(--matrix-space-8) 0; }

/* what the pattern means (Jack's register T38-02, A): each piece of the pattern beside its meaning, groups indented */
.regex-meaning summary { font-weight: 600; cursor: pointer; margin-bottom: var(--matrix-space-8); }
.regex-meaning-scroll { overflow-x: auto; }
.regex-meaning-table { border-collapse: collapse; width: 100%; font-size: var(--matrix-type-table); }
.regex-meaning-table th, .regex-meaning-table td { text-align: start; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); }
.regex-meaning-piece { white-space: nowrap; }
.regex-meaning-piece code { font-family: var(--matrix-font-mono); white-space: pre; }