/* bank.css: what more than one place of the bank console draws. `book.css` (Portfolio, Customers)
 * and `growth.css` (Growth, Partners, Trust, Ask) hold only rules that hang on their own classes. */

/* A tile that is a button reads like any other tile. */
button.t { text-align: start; font: inherit; }

/* A label too long for its tile wraps to a second line instead of being cut (Arabic runs longer). */
.t-kpi .lbl > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }

/* A surface hero's caption is a caption, as a surface tile's is. */
.t-hero.surf .un { color: var(--muted); }
.t-hero .side .lbl { justify-content: flex-start; gap: 8px; }
.t-hero .side .lbl .pill { margin-inline-start: auto; }

/* A picture's tag: an icon and a word, in the tone of what it says (a clock is amber, late is coral). */
.t-photo .tag { display: inline-flex; align-items: center; gap: 6px; }
.tag.amber { background: var(--amber); color: var(--amber-ink); }
.tag.coral { background: var(--coral); color: var(--coral-ink); }

/* A ring on a tile says a measured good share. */
.t-kpi .ringbox { color: var(--good); }

/* An object with no background (the `r_` set) is shown whole in a list, never cropped. */
.rank img[src*="/r_"] { object-fit: contain; background: var(--surface2); }
.row > img[src*="/r_"] { object-fit: contain; }

.dist .held { font-size: 12.5px; }
.t-list > h3 .chips { flex-wrap: nowrap; }