/* csv-anonymize: the column table (one row per distinct header across the files), the passphrase fields and the residual check. */
.an-map-scroll { overflow-x: auto; min-width: 0; max-width: 100%; } /* a grid item: without min-width 0 Firefox widens the page to the table */
.an-map { width: 100%; border-collapse: collapse; }
.an-map caption { display: block; text-align: left; padding-bottom: var(--matrix-space-8); font-size: var(--matrix-type-control); } /* display block: a table-caption box shrinks to one word per line at phone widths */
.an-map th, .an-map td { text-align: left; padding: 6px var(--matrix-space-8) 6px 0; vertical-align: top; border-top: 1px solid var(--matrix-border); }
.an-map thead th { border-top: 0; font-size: var(--matrix-type-control); color: var(--matrix-muted); font-weight: 600; }
.an-map tbody th { font-weight: 600; overflow-wrap: anywhere; }
.an-files { font-weight: 400; color: var(--matrix-muted); font-size: var(--matrix-type-caption); }
.an-role { display: block; }
.an-role-hint { display: block; color: var(--matrix-muted); font-size: var(--matrix-type-caption); }
.an-map td:has(> select) { width: 32%; }
/* T60-04 (C): each column's example and the note on what an example is */
.an-example { width: 28%; overflow-wrap: anywhere; font-size: var(--matrix-type-control); }
.an-example-note { margin: var(--matrix-space-8) 0 0; font-size: var(--matrix-type-caption); }
.an-map select { width: 100%; min-width: 12em; box-sizing: border-box; }
.option-hint { margin: 0; font-size: var(--matrix-type-control); }
.form-field { display: grid; gap: 4px; min-width: 0; } /* min-width 0: Firefox otherwise sizes the cell to the input's own width and widens the page at 320px */
.form-field input { width: 100%; max-width: 24em; }
.form-field input.an-number { max-width: 10em; }
.an-findings { margin-top: var(--matrix-space-16); }
.an-findings h3 { font-size: var(--matrix-type-item-title); margin: 0 0 var(--matrix-space-8); }
.an-findings ul { margin: 0 0 var(--matrix-space-12); padding-left: 1.2em; }
.an-note { margin: 0; font-size: var(--matrix-type-control); }

/* narrow screens: each column becomes a small card instead of a table that scrolls sideways */
@media (max-width: 560px) {
  .an-map, .an-map tbody, .an-map tr, .an-map th, .an-map td { display: block; }
  .an-map thead { display: none; }
  .an-map tr { padding: var(--matrix-space-8) 0; border-top: 1px solid var(--matrix-border); }
  .an-map th, .an-map td { border-top: 0; padding: 2px 0; width: auto; } /* a card's lines are as wide as the card */
}