/* Mobile card layout: under 700px, table rows become stacked cards.
   Cells are labeled via data-label (stamped by mobile.js from the column headers). */
@media (max-width: 700px) {
  table.m-cards thead { display: none; }
  table.m-cards, table.m-cards tbody { display: block; width: 100%; }
  table.m-cards tr { display: block; border: 1px solid #e8e8e4; border-radius: 10px;
                     margin: 10px 8px; background: #fff; padding: 4px 0;
                     box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  table.m-cards td { display: flex; justify-content: space-between; align-items: baseline;
                     gap: 12px; padding: 7px 14px; border-bottom: 1px solid #f6f6f3;
                     text-align: right; font-size: 13.5px; }
  table.m-cards td:last-child { border-bottom: none; }
  table.m-cards td::before { content: attr(data-label); font-size: 11px; color: #999;
                             text-transform: uppercase; letter-spacing: .04em;
                             text-align: left; flex-shrink: 0; }
  table.m-cards td[data-label=""]::before { display: none; }
  /* rows that are expansion/detail rows keep their own layout */
  table.m-cards tr.breakup td, table.m-cards tr[id^="texp"] td,
  table.m-cards tr[id^="vexp"] td, table.m-cards tr[id^="bk"] td {
    display: block; text-align: left; }
  .container, .wrap { padding: 0 8px !important; }
}