/* Bank and insurer screener page.
   Shares the hero, controls, chips and accordion styles with the Sustainable Dividend page (css/sustainable-dividends.css, loaded first) and the
   methodology table with css/earnings-quality.css; this file adds what is specific here: the peer-median tiles and the six-measure row. */

.sd-ctl[hidden]{ display:none; }

/* ---------------- peer medians (hero) ---------------- */
.bi-medians{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin:8px 0 2px; }
.bi-median{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:14px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); }
.bi-median span{ font-size:12px; font-weight:700; letter-spacing:.02em; color: rgba(255,255,255,0.62); }
.bi-median b{ font-size:26px; font-weight:800; line-height:1.1; font-variant-numeric: tabular-nums; color:#fff; }
.bi-median small{ font-size:11.5px; color: rgba(255,255,255,0.46); }

/* ---------------- rows ---------------- */
.bi-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.bi-head-row, .bi-row{ display:grid; align-items:center; column-gap:16px; grid-template-columns: 40px minmax(180px, 1.2fr) minmax(0, 4.6fr); }
.bi-head-row{ padding:12px 6px 10px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.42); }
.bi-head-row .c-cells, .bi-row .c-cells{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px; }
.bi-head-row{ grid-template-columns: 40px minmax(180px, 1.2fr) repeat(6, minmax(0, .77fr)); }
.bi-head-row span{ cursor:help; }
.bi-row{ padding:15px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease; animation: sd-in .35s ease both; }
.bi-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .bi-row{ animation:none; } }
.bi-fy{ display:block; margin-top:4px; font-size:11px; color: rgba(255,255,255,0.42); cursor:help; }

.bi-cell{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid transparent; cursor:help; }
.bi-cell b{ font-size:17px; font-weight:800; line-height:1.15; font-variant-numeric: tabular-nums; color:#fff; }
.bi-cell small{ font-size:11.5px; line-height:1.3; color: rgba(255,255,255,0.52); }
.bi-lbl{ display:none; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.42); }
/* a tint is a hint, never the only signal: the number is always written out */
.bi-cell--good{ background: rgba(47,214,120,0.1); border-color: rgba(47,214,120,0.32); }
.bi-cell--good b{ color:#6FE3A5; }
.bi-cell--ok{ background: rgba(255,194,87,0.08); border-color: rgba(255,194,87,0.3); }
.bi-cell--ok b{ color:#FFD58A; }
.bi-cell--weak{ background: rgba(255,107,87,0.1); border-color: rgba(255,107,87,0.34); }
.bi-cell--weak b{ color:#FF9A8A; }

.bi-trend{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-variant-numeric: tabular-nums; cursor:help; }
.bi-t{ font-size:11.5px; font-weight:700; color: rgba(255,255,255,0.5); }
.bi-t--now{ color: rgba(255,255,255,0.85); }
.bi-trend i{ font-style:normal; font-size:11px; color: rgba(255,255,255,0.3); }

/* ---------------- narrow screens: the row becomes a card ---------------- */
@media (max-width: 1100px){
  .bi-head-row{ display:none; }
  .bi-row{ grid-template-columns: 32px minmax(0,1fr); row-gap:12px; }
  .bi-row .c-cells{ grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bi-lbl{ display:block; }
  .bi-medians{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .bi-row .c-cells{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bi-median b{ font-size:22px; }
}