/* Daily Life Doc, round 30 (zone Q): Q&A done properly (js/kb/kb-qa.js, kb-qa-versions.js). The row under the bar
   (.kqa-tools: the filter All · Saved by AI with counts, and Search), an answer read with its apps as pills (.kqa-view, the plan's
   .kref pills), the versions word on the grey line, the glow after Use this version (.swap), and the words of each
   version in the Versions sheet (.kqa-vw). The cards themselves are round 22's (css/kb.css .kqa-*). One type scale:
   the knowledge base's (--t-sm for words, --t-xs for grey lines). */
.kqa-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 2px 0 8px; }
.kqa-tools .seg2 { flex-wrap: nowrap; }
.kqa-tools .seg2 > button { white-space: nowrap; }
.kqa-n { margin-left: 2px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.seg2 .on .kqa-n { color: var(--ink2); }
.kqa-srch { margin-left: auto; width: 220px; }

.kqa-view { white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; min-height: 1.45em; }
.kqa-view[hidden] { display: none; }
.kqa-view .kref { vertical-align: 0; }

.kqa-src button[data-q="vers"] { margin-left: auto; }
.kqa-e.swap { animation: kqa-swap 900ms var(--ease-out); }
@keyframes kqa-swap { from { box-shadow: 0 0 0 2px var(--sage); } to { box-shadow: 0 0 0 2px transparent; } }

.kqa-ver { flex-wrap: wrap; align-items: flex-start; }
.kqa-ver > span { padding-top: 3px; }
.kqa-ver > button, .kqa-ver > small { margin-left: auto; }
.kqa-vw { flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; border-radius: 10px; background: var(--field); }
.kqa-vw p { margin: 0; font-size: var(--t-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.kqa-vq { font-weight: 600; color: var(--ink); }
.kqa-va { color: var(--ink2); }

@media (max-width: 880px) {
  .kqa-srch { order: 9; flex: 1 0 100%; width: auto; margin-left: 0; }
}