/* Options Flow 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 seven-column row, the ratio pill and the unusual-activity list. */

.op-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.op-head-row, .op-row{
  display:grid; align-items:center; column-gap:14px;
  grid-template-columns: 40px minmax(170px, 1.3fr) repeat(4, minmax(88px, .8fr)) minmax(96px, .9fr) minmax(150px, 1.3fr);
}
.op-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); }
.op-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; }
.op-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .op-row{ animation:none; } }

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

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

/* unusual activity */
.op-un-row{
  display:grid; align-items:center; column-gap:16px; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease;
  grid-template-columns: 40px minmax(170px, 1.3fr) minmax(170px, 1.5fr) minmax(110px, .9fr) minmax(90px, .7fr) minmax(110px, .9fr);
}
.op-un-row:hover{ background: rgba(255,255,255,0.035); }
.op-side{ font-style:normal; display:inline-block; margin-right:4px; padding:1px 7px; border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.op-side--call{ background: rgba(47,214,120,0.14); color:#8DEBB6; box-shadow: inset 0 0 0 1px rgba(47,214,120,0.35); }
.op-side--put{ background: rgba(255,107,87,0.16); color:#FFB3A6; box-shadow: inset 0 0 0 1px rgba(255,107,87,0.4); }

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