/* CSV source tables and version history (spec 57, Persistence § CSV references).
   Phone first: the page never scrolls sideways; only the table's own frame does. */
.csv-data { max-width: 900px; min-width: 0; margin: 0 auto; padding: var(--kk-s-4); color: var(--kk-text); font-family: var(--kk-font-ui); }
.csv-data h1 { margin: 0 0 var(--kk-s-2); font-family: var(--kk-font-display); font-size: 22px; overflow-wrap: anywhere; }
.csv-data p { margin-block: var(--kk-s-2); color: var(--kk-text-soft); overflow-wrap: anywhere; }
.csv-data code { font-family: var(--kk-font-mono); font-size: 12px; overflow-wrap: anywhere; }

.csv-data-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--kk-line); border-radius: var(--kk-r-sm); background: var(--kk-card); }
.csv-data-scroll table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13.5px; }
.csv-data-scroll :is(th, td) { padding: var(--kk-s-2) var(--kk-s-3); border-bottom: 1px solid var(--kk-line); vertical-align: top; white-space: pre-wrap; }
.csv-data-scroll th { position: sticky; top: 0; background: var(--kk-fill-soft); color: var(--kk-ink); font-weight: 600; }

.csv-data-versions { list-style: none; margin: var(--kk-s-4) 0 0; padding: 0; }
.csv-data-version { margin-block: var(--kk-s-3); padding: var(--kk-s-3); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md); background: var(--kk-card); overflow-wrap: anywhere; }
.csv-data-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-2); margin-top: var(--kk-s-2); }
.csv-data-version-actions form { margin: 0; }
.csv-data-viewer { flex: 1; min-width: 0; overflow: auto; }

@media (min-width: 768px) {
  .csv-data { padding: var(--kk-s-5); }
}