/* 03 candidates A/B/C and 04 comparison. Builds on app.css (variables, .card, .row, .chip, .amber, .okbox, .field ...). */
.cmp-lbl { color: var(--muted); white-space: nowrap; }
.cmp-all { margin: 0 0 12px; }

/* 03: settings and slot cards */
.cmp-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 18px; margin: 6px 0 10px; }
.cmp-q { display: block; cursor: pointer; }
.cmp-q small { display: block; margin-left: 22px; color: var(--muted); }
.cmp-q.off { cursor: default; color: var(--muted); }
.cmp-slot .row input.wide { max-width: 340px; }
.cmp-err { white-space: pre-wrap; }
.cmp-run { margin-top: 8px; }
.cmp-run details { margin-top: 6px; }
.cmp-run summary, .cmp-box > summary { cursor: pointer; color: var(--muted); }
.cmp-seg { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 8px 0; }
.cmp-manual { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }

/* 04: segment inputs */
.cmp-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.cmp-in { display: block; margin-top: 4px; }
.cmp-in .cmp-lbl { display: block; font-size: 13px; white-space: normal; }
.cmp-in input[type=text] { width: 100%; }
.hint { display: block; margin-top: 2px; color: var(--muted); }
.en-version { display: block; margin-top: 3px; color: #2f5f8a; white-space: pre-wrap; }
.en-version.stale { color: var(--warn); }

/* 04: the A/B/C by field matrix */
.cmp-box { margin: 10px 0; }
.cmp-scroll { overflow-x: auto; }
.cmp-matrix { border-collapse: collapse; width: 100%; min-width: 640px; table-layout: fixed; }
.cmp-matrix th, .cmp-matrix td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; font-weight: normal; }
.cmp-matrix thead th { background: #f7f8fa; }
.cmp-matrix thead th:first-child, .cmp-matrix tbody th { width: 84px; }
.cmp-matrix tbody th { color: var(--muted); background: #fafbfc; }
.cmp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.cmp-btns button, .cmp-whole { padding: 1px 8px; font-size: 12.5px; }
.cmp-whole { margin-top: 4px; }
.cmp-line { margin-bottom: 3px; font-size: 13px; overflow-wrap: anywhere; }
.diff-legend { margin: 4px 0 6px; font-size: 12px; color: var(--muted); }
.diff-legend i { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 8px; border-radius: 2px; vertical-align: -1px; }
.diff-legend mark, .cmp-sent mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.a-all { background: #eef1f4; }
.a-some { background: #e3eefc; }
.a-unique { background: #fdecd4; }
.cmp-sent { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0; padding: 4px 6px; border-left: 3px solid transparent; border-radius: 3px; }
.cmp-sent.a-all { border-left-color: #c4cad2; }
.cmp-sent.a-some { border-left-color: #8fb3ee; }
.cmp-sent.a-unique { border-left-color: #e8a33d; }
.cmp-sent span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cmp-sent.kept { opacity: .6; }
.cmp-sent button { margin: 0; padding: 0 6px; font-size: 12px; }
.diff-kept { color: var(--ok); }