/* Squeeze Watch page.
   Shares the hero, bands, controls, chips and accordion styles with the Sustainable Dividend page
   (css/sustainable-dividends.css, loaded first); this file adds the eight-column row, the four signal dots and the count pill. */

.sq-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sq-head-row, .sq-row{
  display:grid; align-items:center; column-gap:14px;
  grid-template-columns: 40px minmax(170px, 1.3fr) 118px 112px 92px 88px 112px 128px;
}
.sq-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); }
.sq-row{ padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease; animation: sd-in .35s ease both; }
.sq-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .sq-row{ animation:none; } }

.sq-m{ display:flex; flex-direction:column; gap:3px; min-width:0; cursor:help; }
.sq-m b{ font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; white-space:nowrap; }
.sq-m small{ font-size:11px; line-height:1.3; color: rgba(255,255,255,0.46); }
.sq-lbl{ display:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
.sq-none{ color: rgba(255,255,255,0.4) !important; font-weight:600 !important; }

.sq-pill{ display:inline-block; width:fit-content; padding:3px 10px; border-radius:999px; border:1px solid transparent; font-size:14px !important; }
.sq-pill--4{ background: rgba(255,107,87,0.14); border-color: rgba(255,107,87,0.45); }
.sq-pill--3{ background: rgba(255,194,87,0.1); border-color: rgba(255,194,87,0.36); }
.sq-pill--2{ background: rgba(143,214,111,0.1); border-color: rgba(143,214,111,0.3); }
.sq-pill--0{ background: rgba(94,200,242,0.1); border-color: rgba(94,200,242,0.3); }

.sq-dots{ display:flex; gap:6px; margin-top:2px; }
.sq-dot{ width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.3); box-sizing:border-box; }
.sq-dot--met{ background:#FF6B57; border-color:#FF6B57; }
.sq-dot--no{ background:transparent; }
.sq-dot--unk{ background: rgba(255,255,255,0.14); border-style:dashed; }

.sq-legend{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 2px 14px; font-size:13px; color: rgba(255,255,255,0.7); }
.sq-legend span{ display:inline-flex; align-items:center; gap:8px; }

@media (max-width: 1100px){
  .sq-head-row{ display:none; }
  .sq-row{ grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); row-gap:12px; column-gap:14px; }
  .sq-row .c-id{ grid-column: 1 / -1; }
  .sq-row .c-rank{ display:none; }
  .sq-lbl{ display:block; }
}