/* Short Interest Screener 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 six-column row, the float pill and the sparkline. */

.sh-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sh-head-row, .sh-row{
  display:grid; align-items:center; column-gap:16px;
  grid-template-columns: 40px minmax(190px, 1.5fr) 110px 100px 100px 90px 110px;
}
.sh-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); }
.sh-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; }
.sh-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .sh-row{ animation:none; } }

.sh-m{ display:flex; flex-direction:column; gap:3px; min-width:0; cursor:help; }
.sh-m b{ font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; white-space:nowrap; }
.sh-lbl{ display:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
.sh-up{ color:#FFC9BF !important; }
.sh-down{ color:#9BEDBE !important; }
.sh-up::before{ content:"\25B2\00a0"; font-size:9px; }
.sh-down::before{ content:"\25BC\00a0"; font-size:9px; }

.sh-pill{ display:inline-block; width:fit-content; padding:3px 10px; border-radius:999px; border:1px solid transparent; font-size:14px !important; }
.sh-pill--low{ background: rgba(47,214,120,0.12); border-color: rgba(47,214,120,0.35); }
.sh-pill--mid{ background: rgba(143,214,111,0.1); border-color: rgba(143,214,111,0.3); }
.sh-pill--high{ background: rgba(255,194,87,0.1); border-color: rgba(255,194,87,0.36); }
.sh-pill--very{ background: rgba(255,107,87,0.14); border-color: rgba(255,107,87,0.45); }
.sh-pill--na{ background:transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6) !important; }

.sh-spark{ width:96px; height:28px; overflow:visible; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sh-spark path{ stroke: rgba(255,255,255,0.55); }
.sh-spark circle{ fill:#fff; stroke:none; }
.sh-spark--up path{ stroke:#FFB4A8; }
.sh-spark--down path{ stroke:#8FE3B3; }
.sh-spark--none{ font-size:12px; color: rgba(255,255,255,0.4); }

.sh-movers{ display:grid; grid-template-columns: minmax(0,1fr); gap:28px; }
.sh-sub{ margin:0 0 6px; font-size:15px; font-weight:800; color:#fff; }

@media (max-width: 960px){
  .sh-head-row{ display:none; }
  .sh-row{ grid-template-columns: 32px minmax(0,1fr) repeat(3, auto); row-gap:12px; column-gap:14px; }
  .sh-row .c-id{ grid-column: 2 / -1; }
  .sh-row .sh-m{ grid-row: 2; }
  .sh-row .sh-m--float{ grid-column: 1 / 3; }
  .sh-lbl{ display:block; }
  .sh-row .sh-m--spark{ display:none; }
}