.wq { flex: 1; display: flex; flex-direction: column; gap: 1.6vh; min-width: 0; }
.wq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vw; margin-top: 1vh; }
/* the two sentences: square frames; after "reveal" the one the AI prefers turns black */
.wq-card { font: inherit; font-size: 1.8rem; font-weight: 700; line-height: 1.3; text-align: left; padding: 1.4rem 1.6rem; min-height: 9rem;
           border: var(--rule) solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; transition: background .3s, color .3s; }
.wq-card.win { background: var(--ink); color: var(--bg); }
.wq-verdict { font-size: 1.35rem; font-weight: 700; min-height: 1.8em; }
/* "not one pair": bars from the 50 line; black = prefers the stereotype about us, striped = about straight/cis people */
.wq-chart { display: grid; gap: 1rem; max-width: 70rem; margin-top: 1vh; }
.wq-chart .bar-row { grid-template-columns: 12.5em 1fr 8.5em; font-size: 1.2rem; }
.wq-chart .lab { overflow: visible; text-overflow: clip; }
.wq-chart .track { height: 1.6em; border: 2px solid var(--ink); background: var(--bg); }
.wq-chart .track::before { content: ""; position: absolute; left: 50%; top: -.4em; bottom: -.4em; width: 3px; margin-left: -1.5px; background: var(--ink); z-index: 1; }
.wq-chart .fill { background: var(--ink); }
.wq-chart .fill.below { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, var(--bg) 3px 7px); }
.wq-chart .paper { position: absolute; top: -.45em; bottom: -.45em; width: 5px; margin-left: -2.5px; background: var(--ink);
                   box-shadow: 0 0 0 2px var(--bg); z-index: 2; }
.wq-chart .bar-row.wq-legend { font-size: .8rem; }
.wq-legend-in { display: flex; justify-content: space-between; font-weight: 700; text-transform: uppercase; }
.wq-note { font-size: .8rem; }