/* Earnings Quality Screener page.
   Shares the hero, bands, controls, chips and accordion styles with the Sustainable Dividend
   page (css/sustainable-dividends.css, loaded first); this file only adds what is specific here:
   the five-cell scorecard rows, the rating tag, and the stock-comp haircut bars. */

.eq-notes{ grid-template-columns: minmax(0,1fr); }          /* the methodology table needs the full width */

/* the methodology table inside the hero accordion */
.eq-th-table{ width:100%; border-collapse:collapse; font-size:12.5px; line-height:1.45; margin:4px 0 6px; }
.eq-th-table th, .eq-th-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); vertical-align:top; }
.eq-th-table thead th{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.eq-th-table tbody th{ font-weight:700; color:#fff; white-space:nowrap; }
.eq-th-table td{ color: var(--ink-soft); }

/* ---------------- scorecard rows ---------------- */
.eq-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.eq-head-row, .eq-row{
  display:grid; align-items:center; column-gap:14px;
  grid-template-columns: 40px minmax(190px, 1.5fr) repeat(5, minmax(92px, 1fr)) 100px;
}
.eq-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); }
.eq-head-row .c-tier{ text-align:right; }
.eq-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; }
.eq-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .eq-row{ animation:none; } }
.eq-row .c-cells{ display:contents; }
.eq-row .c-tier{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.eq-fy{ font-size:11px; color: rgba(255,255,255,0.42); cursor:help; white-space:nowrap; }

/* a number with a glyph dot: state never rests on colour alone, and the number itself stays in ink */
.eq-m{ display:flex; flex-direction:column; gap:3px; min-width:0; cursor:help; }
.eq-m-lbl{ display:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
.eq-m-main{ display:flex; align-items:center; gap:7px; }
.eq-m-main b{ font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; white-space:nowrap; }
.eq-m small{ font-size:11px; line-height:1.3; color: rgba(255,255,255,0.46); }
.eq-m--na .eq-m-main b{ color: rgba(255,255,255,0.5); font-weight:700; }

.eq-dot{
  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;
}
.eq-dot--ok{ background: rgba(47,214,120,0.16); color:#6FE3A5; box-shadow: inset 0 0 0 1px rgba(47,214,120,0.35); }
.eq-dot--watch{ background:#FFC257; color:#2A1D05; }
.eq-dot--flag{ background: rgba(255,107,87,0.92); color:#240B07; }
.eq-dot--na{ background:transparent; color: rgba(255,255,255,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }

/* why a check is not clean: plain words under the company name */
.eq-whys{ display:flex; flex-direction:column; gap:2px; margin-top:4px; font-size:11.5px; line-height:1.4; color: rgba(255,255,255,0.72); }
.eq-why::before{ display:inline-block; width:12px; margin-right:4px; font-size:11px; font-weight:800; }
.eq-why--flag::before{ content:"\2715"; color:#FF8A75; }
.eq-why--watch::before{ content:"!"; color:#FFC257; }

/* the overall rating */
.eq-tier{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px 0 8px; border-radius:999px; cursor:help;
  font-size:12px; font-weight:800; white-space:nowrap; border:1px solid transparent;
}
.eq-tier i{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; font-style:normal; font-size:11px; font-weight:800; line-height:1; }
.eq-tier--strong{ background: rgba(47,214,120,0.12); border-color: rgba(47,214,120,0.35); color:#E8FBF0; }
.eq-tier--strong i{ background:#2FD678; color:#07210F; }
.eq-tier--mixed{ background: rgba(255,194,87,0.12); border-color: rgba(255,194,87,0.38); color:#FFF3DA; }
.eq-tier--mixed i{ background:#FFC257; color:#2A1D05; }
.eq-tier--weak{ background: rgba(255,107,87,0.14); border-color: rgba(255,107,87,0.42); color:#FFE9E5; }
.eq-tier--weak i{ background:#FF6B57; color:#240B07; }
.eq-tier--na{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); }
.eq-tier--na i{ background: rgba(255,255,255,0.25); color:#10141A; }

.eq-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* .eq-table is position:relative, so these cannot widen the page */

/* ---------------- the stock-comp haircut ---------------- */
.eq-hc-key{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 2px 10px; font-size:12px; color: rgba(255,255,255,0.6); }
.eq-hc-sw{ display:inline-block; width:12px; height:8px; margin-right:7px; border-radius:2px; vertical-align:baseline; }
.eq-hc-sw--after{ background:#2FD678; }
.eq-hc-sw--cut{ background:#FFC257; }
.eq-hc{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.eq-hc-row{
  display:grid; align-items:center; column-gap:18px; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer;
  grid-template-columns: 40px minmax(150px, 1fr) minmax(220px, 2.2fr) 130px; transition: background .15s ease;
}
.eq-hc-row:hover{ background: rgba(255,255,255,0.035); }
.eq-hc-bar{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.eq-hc-track{ position:relative; display:block; height:10px; border-radius:5px; background: rgba(255,255,255,0.08); }
.eq-hc-after{ position:absolute; left:0; top:0; bottom:0; background:#2FD678; border-radius:5px 0 0 5px; }
.eq-hc-cut{ position:absolute; top:0; bottom:0; background:#FFC257; border-radius:0 5px 5px 0; }
.eq-hc-lbl{ font-size:12px; line-height:1.4; color: rgba(255,255,255,0.62); }
.eq-hc-lbl b{ color:#fff; font-variant-numeric: tabular-nums; }
.eq-hc-share{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.eq-hc-share b{ font-size:22px; font-weight:800; color:#FFC257; font-variant-numeric: tabular-nums; line-height:1.1; }
.eq-hc-share small{ font-size:11px; line-height:1.35; color: rgba(255,255,255,0.48); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px){
  .eq-head-row, .eq-row{ grid-template-columns: 34px minmax(150px, 1.3fr) repeat(5, minmax(78px, 1fr)) 90px; column-gap:10px; }
  .eq-m-main b{ font-size:14px; }
}
@media (max-width: 960px){
  .eq-head-row{ display:none; }
  .eq-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:14px; padding:18px 4px;
    grid-template-areas: "rank id tier" "cells cells cells";
  }
  .eq-row .c-rank{ grid-area:rank; font-size:22px; align-self:start; }
  .eq-row .c-id{ grid-area:id; }
  .eq-row .c-tier{ grid-area:tier; align-self:start; }
  .eq-row .c-cells{ grid-area:cells; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px 12px; }
  .eq-m-lbl{ display:block; }
  .eq-hc-row{ grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:10px; grid-template-areas: "rank id share" "bar bar bar"; }
  .eq-hc-row .c-rank{ grid-area:rank; font-size:22px; }
  .eq-hc-row .c-id{ grid-area:id; }
  .eq-hc-row .eq-hc-share{ grid-area:share; }
  .eq-hc-row .eq-hc-bar{ grid-area:bar; }
}
@media (max-width: 480px){
  .eq-row .c-cells{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eq-th-table tbody th{ white-space:normal; }
}