/* 質問ページだけで使う見た目（2026-09-12 追加：これまでの質問・あとで・答え直し）。
   app.css は録音ページとも共有なので触らず、ここに分けている */

.q-tabs { display: flex; gap: 6px; margin-top: 24px; border-bottom: 1px solid var(--border-default); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.q-tabs::-webkit-scrollbar { display: none; }
.q-tab {
  appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 12px 8px; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; letter-spacing: var(--ls-mid);
}
.q-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ginkgo-deep); }
.q-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-tab-n { display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--bg-neutral); font-size: 11px; line-height: 1.7; text-align: center; font-variant-numeric: tabular-nums; }
.q-tab-n:empty { display: none; }
.q-tab[aria-selected="true"] .q-tab-n { background: var(--ginkgo-soft); }

.q-panel { margin-top: 18px; }
.q-panel-lead { margin-bottom: 12px; line-height: 1.8; }

.q-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin-bottom: 8px; }
.q-filter { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-caption); color: var(--text-secondary); }
.q-filter select { min-width: 8em; max-width: 100%; }
.q-filter-note select { max-width: 20em; }

.q-status { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.q-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px 2px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--paper); color: var(--text-secondary); }
.q-chip.s-answered { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.q-chip.s-rejected { border-color: var(--border-default); color: var(--text-secondary); background: var(--bg-neutral); }
.q-chip.s-skipped { border-color: var(--ginkgo-deep); color: #7a5a08; background: var(--ginkgo-wash); }
.q-chip.s-flag { border-color: var(--risk); color: var(--risk); background: var(--risk-bg); }

.q-card.flagged { border-color: var(--risk); }
.q-flag { font-size: var(--fs-caption); color: var(--risk); margin-top: 6px; line-height: 1.7; }
.q-answer { margin-top: 8px; }
.q-actions { margin-top: 10px; }
.q-editor { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-default); }
.q-links { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.q-sep { color: var(--text-tertiary); }
.q-history { margin-top: 8px; }
.q-history summary { cursor: pointer; }
.q-history ul { margin: 6px 0 0; padding-left: 1.2em; font-size: var(--fs-caption); line-height: 1.8; }

@media (max-width: 560px) {
  .q-tab { padding: 10px 8px 9px; }
  .q-filter { flex: 1 1 45%; }
  .q-filter select { width: 100%; }
}