/* Mobile-first fixes shared by every page. Loaded after each page's own styles. */

/* Inputs at 16px stop iPhones zooming in when you tap them. */
input, select, textarea, button { font-size: 16px; }

/* Bigger tap targets for radios, checkboxes and their labels. */
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.seg label, .check, .checks label, label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
}


@media (max-width: 640px) {
  /* Stage row: a list you read top to bottom, not five squashed columns. */
  .track { grid-template-columns: 1fr !important; }
  .track li { border-right: 0 !important; border-bottom: 1px solid var(--line); font-size: 15px !important; }
  .track li:last-child { border-bottom: 0; }
  .track button { grid-template-columns: 1fr auto; align-items: center; min-height: 48px; padding: 10px 12px !important; }

  /* Data tables become one card per row, each value labelled. */
  .scroll:has(> table > thead) { overflow-x: visible; }
  table:has(thead):not(.compare-table, .cmp-table) { min-width: 0 !important; border: 0; }
  table:has(thead):not(.compare-table, .cmp-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table:has(thead):not(.compare-table, .cmp-table), table:has(thead):not(.compare-table, .cmp-table) tbody, table:has(thead):not(.compare-table, .cmp-table) tr,
  table:has(thead):not(.compare-table, .cmp-table) td, table:has(thead):not(.compare-table, .cmp-table) tbody th { display: block; width: 100%; }
  table:has(thead):not(.compare-table, .cmp-table) tr { border: 1px solid var(--line); padding: 8px 12px; margin-bottom: 10px; }
  table:has(thead):not(.compare-table, .cmp-table) td, table:has(thead):not(.compare-table, .cmp-table) tbody th { border: 0 !important; padding: 4px 0 !important; background: none; }
  table:has(thead):not(.compare-table, .cmp-table) tbody th { font-size: 16px; }
  table:has(thead):not(.compare-table, .cmp-table) td[data-label]::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 400; color: var(--muted);
  }
}

/* An input and its label stay together on one line. */
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; white-space: nowrap; }
.opt label { font-weight: 400; }