/* Options chain + put-selling compare (/options). Layered on cash.css (page shell, .meta,
   .cats pills, base table styles) — same base sankey.css uses. */
:root {
  --opt-ink:   #e6e8eb;
  --opt-ink-2: #9aa0a6;
  --opt-ink-3: #6b7280;
  --opt-line:  #23262d;
  --opt-call:  #0f9d63;   /* same validated green step sankey.css uses for "kept" flows */
  --opt-put:   #d9622a;   /* same validated warm step sankey.css uses for "cost" flows */
}

/* --- Filter rows (one row, above everything it scopes) --- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.filters .cats { margin: 0; }
.fl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--opt-ink-2); }
.fl input { background: #161922; color: var(--opt-ink); border: 1px solid var(--opt-line);
            border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 13px;
            min-width: 220px; min-height: 34px; }
.fl input[type="number"] { min-width: 70px; width: 70px; }
.fl input:focus { outline: 2px solid var(--opt-call); outline-offset: 1px; }
.viewtoggle { display: flex; gap: 8px; margin: 0 0 16px; }
.viewtoggle .cat { font: inherit; font-size: 13px; }

/* --- Chain table: calls | strike | puts, mirrored like a real broker chain --- */
.chainwrap { overflow-x: auto; border: 1px solid var(--opt-line); border-radius: 10px; }
.chainwrap.loading { opacity: .45; }
table.chain { border-collapse: collapse; width: 100%; font-size: 12.5px; white-space: nowrap; }
table.chain th, table.chain td { padding: 6px 10px; text-align: right;
                                  border-bottom: 1px solid #1c1f26; }
table.chain thead th { background: #161922; font-weight: 600; color: var(--opt-ink-2);
                        position: sticky; top: 0; }
table.chain thead tr.grp th { background: #11141b; font-size: 11px; letter-spacing: .04em;
                               text-transform: uppercase; }
table.chain thead tr.grp th.call-grp { color: var(--opt-call); }
table.chain thead tr.grp th.put-grp  { color: var(--opt-put); }
table.chain td.strike { text-align: center; font-weight: 700; color: var(--opt-ink);
                         background: #11141b; border-left: 1px solid var(--opt-line);
                         border-right: 1px solid var(--opt-line); }
table.chain tr.atm td { background: rgba(255,255,255,.06); }
table.chain tr.atm td.strike { background: rgba(255,255,255,.14); }
table.chain td.itm-call { color: var(--opt-call); }
table.chain td.itm-put { color: var(--opt-put); }
table.chain .empty { padding: 32px; text-align: center; color: var(--opt-ink-2); white-space: normal; }

/* --- Compare table: click-header-to-sort, small dataset (<= COMPARE_CAP rows) --- */
.comparewrap { overflow-x: auto; border: 1px solid var(--opt-line); border-radius: 10px; }
.comparewrap.loading { opacity: .45; }
table.compare { border-collapse: collapse; width: 100%; font-size: 13px; }
table.compare th, table.compare td { padding: 7px 12px; white-space: nowrap;
                                      border-bottom: 1px solid #1c1f26; }
table.compare th { text-align: left; background: #161922; font-weight: 600; cursor: pointer;
                    user-select: none; }
table.compare td.num, table.compare th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compare td.rank { text-align: right; color: var(--opt-ink-3); }
table.compare td.annualized { font-weight: 600; color: var(--opt-put); }
table.compare tbody tr:hover { background: #161922; }
.comparemeta { color: var(--opt-ink-2); font-size: 12px; margin: 8px 0 0; }

@media (max-width: 560px) {
  .fl input { min-width: 0; flex: 1; }
  .fl { flex: 1 1 100%; }
}