/* Compare Lists. The options row sits right under the boxes: the four options, then Clear all at the row's end.
   The form is not a box: its labels are items of the row (as Compare's .options). */
.list-toolbar { align-items: center; column-gap: var(--space-4); }
.list-toolbar .options { display: contents; }
.list-toolbar label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
@media (hover: hover) and (pointer: fine) { .list-toolbar label { min-height: 36px; } }
@media (min-width: 640px) { .list-toolbar #clear-btn { margin-left: auto; } }
#list-status { margin: 0; }
#list-status:not(:empty) { margin: calc(-1 * var(--space-1)) 0 var(--space-3); }

/* The boxes give up height on shorter screens, so the answers still start on the first screen under them; phones
   start short, as Compare's do. */
.compare-lists textarea { height: 7.5rem; min-height: 7.5rem; }
@media (min-width: 768px) { .compare-lists textarea { height: clamp(7.5rem, calc(100vh - 33.5rem), 15rem); } }

/* The three answers mirror the boxes: only in the first, in both, only in the second. Each is a flat card with the
   pane's label row; a long answer scrolls inside its card (15 lines) and a long or right-to-left item wraps in place. */
.answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@media (min-width: 768px) { .answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.answer { min-width: 0; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.answer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-bottom: 1px solid var(--hairline); }
.answer-head h2 { margin: 0; }
.answer-count { color: var(--ink); }
.answer-body { padding: var(--space-2) var(--space-3); font-family: var(--font-mono); line-height: var(--leading-mono); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; max-height: calc(15 * var(--leading-mono) * 1em + 2 * var(--space-2)); overflow-y: auto; }
.answer-body.is-empty { font-family: var(--font); color: var(--ink-muted); }
#repeats-note { margin: var(--space-2) 0 0; }
.compare-lists .next-step { margin: var(--space-4) 0 0; }