/* Compounders at a Fair Price page.
   Built on the Shareholder Yield page's rows, tiles and cards (css/shareholder-yield.css, loaded first, which shares the hero, bands,
   controls and chips with css/sustainable-dividends.css). This file adds the four-lens row (a count plus one cell per lens), the
   cleared / not cleared / cannot-be-measured marks and the "how few survive" funnel.

   Colour: blue for a lens cleared, neutral grey for one that is not (a lens missed is not a red flag, just a lens missed) and a fainter grey
   for one that cannot be measured. Every state also carries a mark (tick, cross, dash) and a word for screen readers; numbers stay in plain ink. */

.fp-table .sy-head-row, .fp-table .fp-row{
  grid-template-columns: 40px minmax(170px, 1.1fr) 150px repeat(4, minmax(112px, 1fr));
}
.fp-row .fp-sum b{ font-size:19px; }
.fp-dots{ display:flex; gap:4px; margin:1px 0 2px; }
.fp-dot{ width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.4); box-sizing:border-box; }
.fp-dot--pass{ background:#3987E5; border-color:#3987E5; }
.fp-dot--fail{ background:transparent; border-color: rgba(255,255,255,0.5); }
.fp-dot--na{ background:transparent; border-color: rgba(255,255,255,0.22); border-style:dashed; }

.fp-mark{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:18px; height:18px; border-radius:50%; font-style:normal; font-size:11px; font-weight:800; line-height:1; }
.fp-mark--pass{ background: rgba(57,135,229,0.25); color:#8FC0F7; border:1px solid rgba(57,135,229,0.7); }
.fp-mark--fail{ background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.28); }
.fp-mark--na{ background:transparent; color: rgba(255,255,255,0.4); border:1px dashed rgba(255,255,255,0.25); }
.fp-lens b{ gap:7px; font-size:14px; }
.fp-lens--na b{ color: rgba(255,255,255,0.55); font-weight:700; }
.fp-lens small{ line-height:1.35; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------------- how few survive ---------------- */
.fp-funnel{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; margin:6px 0 0; padding:22px 24px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fp-fn-row{ display:grid; grid-template-columns: minmax(190px, 330px) minmax(0, 1fr) 44px; align-items:center; gap:16px; }
.fp-fn-lbl{ font-size:13.5px; color:#fff; line-height:1.35; }
.fp-fn-track{ display:block; height:14px; border-radius:7px; background: rgba(255,255,255,0.07); overflow:hidden; }
.fp-fn-fill{ display:block; height:100%; border-radius:7px; background:#3987E5; }
.fp-fn-row:first-child .fp-fn-fill{ background: rgba(255,255,255,0.45); }
.fp-fn-n{ font-family:'Instrument Sans', sans-serif; font-size:20px; font-weight:600; color:#fff; text-align:right; font-variant-numeric: tabular-nums; }
.fp-funnel-note{ position:relative; z-index:1; margin:10px 2px 22px; font-size:12.5px; line-height:1.6; color: rgba(255,255,255,0.55); }
.fp-how4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.fp-how4 a{ color:#9CC3F5; }

@media (max-width: 1180px){
  .fp-table .sy-head-row, .fp-table .fp-row{ grid-template-columns: 34px minmax(140px, 1fr) 130px repeat(4, minmax(94px, 1fr)); column-gap:10px; }
}
@media (max-width: 1080px){
  .fp-how4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 960px){
  .fp-table .fp-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:14px; padding:18px 4px;
    grid-template-areas: "rank id net" "cells cells cells";
  }
  .fp-row .fp-sum{ min-width:120px; }
  .fp-how4{ grid-template-columns: minmax(0,1fr); }
  .fp-fn-row{ grid-template-columns: minmax(0,1fr) 44px; gap:6px 12px; }
  .fp-fn-lbl{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .fp-funnel{ padding:16px; }
}