/* KERS_TX_DESKTOP_TABLE_PHONE_GRID_R4_20260903 */
/* Desktop/list: one modern table only. Grid: cards only. Phone: JS adds html.kers-tx-phone-grid-r4 and forces Grid. */

/* LIST mode on non-phone: hide the duplicate mobile-card list and show the real table. */
html:not(.kers-tx-phone-grid-r4) .tx-list-shell .tx-mobile-list{display:none!important}
html:not(.kers-tx-phone-grid-r4) .tx-list-shell>div.hidden.overflow-x-auto,
html:not(.kers-tx-phone-grid-r4) .tx-list-shell .tx-table-scroll{display:block!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important}
html:not(.kers-tx-phone-grid-r4) .tx-list-shell .tx-table{display:table!important;width:100%!important;border-collapse:separate!important;border-spacing:0 7px!important}

/* Phone: never show the table/list branch. JS immediately switches Svelte state to Grid. */
html.kers-tx-phone-grid-r4 .tx-list-shell{display:none!important}
html.kers-tx-phone-grid-r4 .tx-view-toggle button:first-child{display:none!important}
html.kers-tx-phone-grid-r4 .tx-view-toggle button:nth-child(2){display:flex!important}
html.kers-tx-phone-grid-r4 .tx-grid{display:grid!important}

/* Phone Grid cards: use the whole width and remain readable. */
html.kers-tx-phone-grid-r4 .tx-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important}
html.kers-tx-phone-grid-r4 .tx-grid-card{min-width:0!important;padding:10px!important;border-radius:16px!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-network{min-width:0!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-network span,
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-network b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-phone-center b{font-size:12.5px!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-grid-money,
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-balances{grid-template-columns:1fr 1fr!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-actions{grid-template-columns:1.35fr repeat(4,1fr)!important;gap:4px!important}
html.kers-tx-phone-grid-r4 .tx-grid-card .tx-actions button{min-width:0!important}

@media (max-width:390px){
  html.kers-tx-phone-grid-r4 .tx-grid{grid-template-columns:1fr!important}
}