/* ============================================================
   Alpha Finance: BTC & ETH options dashboard (/crypto-options-data/)
   Open interest, volume, call/put splits and max pain, straight from
   Deribit's public API. One snapshot on load, no streaming.
   Loaded after alpha.css, article.css and liqs.css (panels, cards,
   tables and tabs come from liqs.css).
   ============================================================ */

/* ---------- hero: headline left, the four prints right ---------- */

.opthero-grid {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 0 56px;
  align-items: center;
}
.opthero-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 26px 0 22px;
}
@media (max-width: 1080px) {
  .opthero-grid { grid-template-columns: 1fr; }
  .opthero-side { padding-top: 0; }
}
@media (max-width: 480px) {
  .opthero-side { grid-template-columns: 1fr; }
}

/* ---------- call / put split bars ---------- */

.sbwrap { display: flex; flex-direction: column; gap: 22px; padding: 4px 4px 6px; }
.sb .sb-k {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.sb .sb-bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-2);
}
.sb .sb-bar i {
  display: flex;
  align-items: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #0a0b0d;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.4s ease;
}
.sb .sb-bar .c { background: var(--pos); justify-content: flex-start; padding-left: 9px; }
.sb .sb-bar .p { background: var(--neg); justify-content: flex-end; padding-right: 9px; }
.sb .sb-v {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sb .sb-v .c { color: var(--pos-text); }
.sb .sb-v .p { color: var(--neg-text); }
.sb .sb-v i { font-style: normal; color: var(--faint); margin: 0 5px; }

/* ---------- instrument tables: monospace pair names ---------- */

.extbl td.inst {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}
.extbl .cside { color: var(--pos-text); }
.extbl .pside { color: var(--neg-text); }
.extbl td.dim { color: var(--muted); }

/* nearest-expiry row highlight in the max pain table */
.extbl tr.front td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .sbwrap { padding: 2px 0 4px; }
}

/* hero tiles as one board: hairlines between cells, no separate cards */
.opthero-side { gap: 1px; }
.opthero-side .lcard { border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--line-2); }
.opthero-side .lcard .k .ic { color: var(--muted); }

/* ---------- the strike chart's expiry picker: the shared seg dialect ---------- */

.opt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.opt-head h2 { margin-right: auto; }
.opt-head .pick { display: flex; align-items: center; gap: 9px; }
.opt-head .pick-l {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.opt-head .seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.opt-head .seg button {
  padding: 6px 10px; border: 0; border-left: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: color 0.13s, background 0.13s;
}
.opt-head .seg button:first-child { border-left: 0; }
.opt-head .seg button:hover { color: var(--text-2); background: var(--panel-2); }
.opt-head .seg button[aria-pressed="true"] { color: #0a0b0d; background: var(--lime); }

/* ---------- the by-expiry table doubles as a picker ---------- */

.extbl tbody tr[data-t] { cursor: pointer; transition: background 0.12s; }
.extbl tbody tr[data-t]:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.extbl tr.is-on td { background: color-mix(in srgb, var(--lime) 7%, transparent); }
.extbl tr.is-on td:first-child { color: var(--lime); }
.extbl td.iv { color: var(--text-2); }
.extbl .skp { color: var(--neg-text); }
.extbl .skc { color: var(--pos-text); }

/* the biggest-expiry tile carries three prints on its split line */
.opthero-side .lcard .split > span:nth-child(2) { color: var(--text-2); }

@media (max-width: 760px) {
  .opt-head .pick-l { display: none; }
  .extbl th:nth-child(4), .extbl td:nth-child(4) { display: none; }
}

/* five tiles beside the headline: a touch narrower than the house minimum so
   the row holds all five on a laptop pane instead of dropping one underneath */
body.term .vhero .opthero-side .lcard { min-width: 108px; }