/* bh-cards.css (handoff 083): phone tables become cards. Linked media="(max-width:767px)" like bh-phone.css, so it sits
   outside the page CSS budget; test_ui_shell keeps it under 2 KB. The card itself is bh-patterns.css's .bh-table--cards
   (a <thead> plus data-label on each cell); this adds a title cell that isn't the first, a full-width text cell, cells kept
   for the desk (.bh-cell--desk), a two-line clamp, and .bh-table--lines: a line table where the amount sits under the description. The PHP apps carry
   the same classes in bh-php.css. */
.bh-table--cards td.bh-cell--title{order:-1;font-size:17px;font-weight:600;text-align:left}
.bh-table--cards td.bh-cell--title small{font-weight:400}
.bh-table--cards td.bh-cell--title::before,.bh-table--cards td.bh-cell--block::before{display:none}
.bh-table--cards tr:has(>.bh-cell--title)>td:first-child:not(.bh-cell--title){font-size:inherit;font-weight:inherit;text-align:right}
.bh-table--cards tr:has(>.bh-cell--title)>td:first-child:not(.bh-cell--title)::before{display:block}
.bh-table--cards td.bh-cell--block{display:block;text-align:left}
.bh-table--cards td.bh-cell--desk{display:none}
.bh-table--cards td.bh-cell--block .bh-btn{width:100%}
.bh-table--cards .bh-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bh-table--lines thead{display:none}
.bh-table--lines,.bh-table--lines tbody{display:block}
.bh-table--lines tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--bh-border-soft)}
.bh-table--lines :is(td,th){display:block;padding:0;border:0;white-space:normal;overflow-wrap:anywhere}
.bh-table--lines tr>:first-child:not([colspan]){flex:1 1 100%}
.bh-table--lines [colspan]{flex:1}
.bh-table--lines td[data-label]{font-size:13px;color:var(--bh-ink-2)}
.bh-table--lines td[data-label]::before{content:attr(data-label) " "}
.bh-table--lines tr>:last-child{margin-left:auto;text-align:right;font-weight:600;color:var(--bh-ink)}