/* The Company File of a bank or NBFC (v106a, 17 Oct 2026). Harsh: "Let's build the banks and NBFCs their own industry
   standard metrics in their stock pages ... NII, NIM, ROE, ROA, credit costs, provisions, NPA, GNPA, CASA", then "we need to
   show quarterly trend in each metric in these BFS stock pages". Loaded on a bank's or NBFC's page only, so every other
   page is as it was. 04 Bank numbers (Lender numbers): groups of tiles, each with the latest figure, its change, an i & the
   last eight quarters as a small chart (the latest in coral, the rest muted, as the hero's small charts), then the quarter
   by quarter table in its own scroll box & the notes; 03's cards four to a row on a wide screen. */

/* ---------- 04: the tiles ---------- */
html body .hvd .cf.cf2 .lleg{margin:0 0 12px}
html body .hvd .cf.cf2 .lleg .sw.sk-o{background:var(--harbour,#1D4A70);opacity:.32}
html body .hvd .cf.cf2 .lgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
html body .hvd .cf.cf2 .lgp{grid-column:span 12;min-width:0;padding:14px 16px 16px}
html body .hvd .cf.cf2 .lgrid-bank .lgp-cap{grid-column:span 8}
html body .hvd .cf.cf2 .lgrid-bank .lgp-ret{grid-column:span 4}
html body .hvd .cf.cf2 .lgp>h3.pt{margin:0 0 10px}
html body .hvd .cf.cf2 .ltg{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px}
html body .hvd .cf.cf2 .lt{position:relative;display:flex;flex-direction:column;min-width:0;padding:11px 12px 10px;border-radius:12px;background:rgba(255,255,255,.74);border:1px solid rgba(29,74,112,.12)}
html body .hvd .cf.cf2 .lt-k{margin:0;padding-right:26px;min-height:2.7em;font:600 12.5px/1.35 var(--fb,inherit);color:#5E5249}
html body .hvd .cf.cf2 .lt-t{display:inline-block;padding:0 6px;border-radius:999px;font:600 10.5px/1.6 var(--fb,inherit);color:#1D4A70;background:rgba(29,74,112,.08);vertical-align:1px;white-space:nowrap}
html body .hvd .cf.cf2 .lt-v{display:block;margin-top:4px;font:600 20px/1.2 var(--fh,inherit);letter-spacing:-.01em;color:#1E1A17;white-space:nowrap;font-variant-numeric:tabular-nums}
html body .hvd .cf.cf2 .lt-c{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:#5E5249}
html body .hvd .cf.cf2 .lt-c em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
html body .hvd .cf.cf2 .lt-c em.up{color:#1E7A5A}
html body .hvd .cf.cf2 .lt-c em.dn{color:#B0392B}
html body .hvd .cf.cf2 .lt-g{margin-top:auto;padding-top:10px}
html body .hvd .cf.cf2 .lt-g .hq-sk{display:block;width:100%;height:30px;margin:0;overflow:visible}
html body .hvd .cf.cf2 .lt-g .hq-sk .sk{fill:var(--harbour,#1D4A70);opacity:.3}
html body .hvd .cf.cf2 .lt-g .hq-sk .sk-neg{fill:#B0392B;opacity:.5}
html body .hvd .cf.cf2 .lt-g .hq-sk .sk-now{fill:var(--coral,#F46C62);opacity:1}
html body .hvd .cf.cf2 .lt-g .hq-sk .sk-ln{fill:none;stroke:var(--harbour,#1D4A70);stroke-opacity:.45;stroke-width:1.6;stroke-linejoin:round}
html body .hvd .cf.cf2 .lt-g .hq-sk .sk-dot{fill:none;stroke:var(--coral,#F46C62);stroke-width:6;stroke-linecap:round}
html body .hvd .cf.cf2 .lt-f{display:block;margin-top:6px;font-size:11.5px;line-height:1.35;color:#7C6F65}
/* the i sits in the tile's corner; what it says opens inside the tile, so it never runs off a phone's screen */
html body .hvd .cf.cf2 .lt>details.lt-i{position:static}
html body .hvd .cf.cf2 .lt>details.lt-i>summary{position:absolute;top:8px;right:8px;width:20px;height:20px;cursor:pointer}
html body .hvd.hvd .cf.cf2 .lt>details.lt-i>.pop{position:static;width:auto;margin:8px 0 0;padding:9px 11px;font-size:12.5px;line-height:1.5;color:#2B2622;border-radius:10px;box-shadow:none;background:#FFF7EF;border:1px solid rgba(30,26,23,.08)}
html body .hvd.hvd .cf.cf2 .lt>details.lt-i>.pop p+p{margin-top:5px}
/* while an i is open, the other tiles in its group keep their own height (their charts stay under their figures) */
html body .hvd .cf.cf2 .ltg:has(>.lt>details[open]){align-items:start}

/* ---------- 04: quarter by quarter & the notes ---------- */
html body .hvd .cf.cf2 .lqp{margin-top:12px}
html body .hvd .cf.cf2 .lqp>h3.pt{margin-bottom:4px}
html body .hvd .cf.cf2 table.lqt tr.lg>*{padding-top:14px;padding-bottom:5px;font:600 11.5px var(--fb,inherit);letter-spacing:.05em;text-transform:uppercase;color:#7C6F65;background:transparent}
html body .hvd .cf.cf2 table.lqt tr.lg>td{border-bottom:1px solid rgba(29,74,112,.14)}
html body .hvd .cf.cf2 table.lqt tbody th[scope="row"]{min-width:210px}
html body .hvd .cf.cf2 .lnotes{display:grid;gap:4px;max-width:1000px;margin-top:12px}
html body .hvd .cf.cf2 .lnotes p{margin:0;font-size:12.5px;line-height:1.5;color:#5E5249}

/* ---------- 03: a lender's cards, four to a row ---------- */
@media(min-width:1101px){html body .hvd .cf.cf2 .ycards.lyc{grid-template-columns:repeat(4,minmax(0,1fr))}}
html body .hvd .cf.cf2 .lyo-to{margin:10px 0 0}

/* ---------- narrower screens ---------- */
/* a tablet: six tiles three to a row, five in a row (three & two below 900px), four in a row; two keep the width of four */
@media(max-width:1100px){html body .hvd .cf.cf2 .lgrid-bank :is(.lgp-cap,.lgp-ret){grid-column:span 12}}
@media(min-width:761px) and (max-width:1100px){
 html body .hvd .cf.cf2 .lgp-n6 .ltg{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body .hvd .cf.cf2 :is(.lgp-n4,.lgp-n2) .ltg{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:900px){html body .hvd .cf.cf2 .lgp-n5 .ltg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 html body .hvd .cf.cf2 .lgrid{gap:10px}
 html body .hvd .cf.cf2 .lgp{padding:12px 12px 14px}
 html body .hvd .cf.cf2 .ltg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 html body .hvd .cf.cf2 .lt{padding:10px 10px 9px}
 html body .hvd .cf.cf2 .lt-k{font-size:12px}
 html body .hvd .cf.cf2 .lt-v{font-size:17px}
 html body .hvd .cf.cf2 table.lqt tbody th[scope="row"]{min-width:140px;max-width:170px}
 /* a tile whose i is open takes the whole row, so what it says reads at a comfortable width */
 html body .hvd .cf.cf2 .ltg>.lt:has(>details[open]){grid-column:1/-1}
}