/* Local additions; typography, tables, callouts, and print come from handout.css. */
.data-figure { margin: 26px 0; }
.data-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.data-figure figcaption { color: var(--muted); font-size: 13px; line-height: 1.55; margin-top: 8px; }
.data-controls { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.data-controls label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.data-controls select { max-width: 100%; font: inherit; padding: 7px 10px; border: 1px solid #8798ad; border-radius: 4px; background: #fff; color: var(--ink); }
.data-controls select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#data-result { font-weight: 600; }
.bonus-note > summary { color: var(--navy); }
@media print {
    .data-figure { break-inside: avoid; }
    .data-figure figcaption { color: #333; }
}

@media screen and (max-width: 600px) {
    #w-data-audit table { min-width: 520px; }
    #bonus-dedup table { min-width: 540px; }
}
@media print {
    details.ans.bonus-note > summary { display: block; color: #000; font-weight: 700; }
    details.ans.bonus-note > summary::before { display: none; }
}