/* styles/options.css — OPTIONS page */

/* OPTIONS has 4 content rows + footer strip — default .main only has 4 row tracks
   so the 5th section was getting clipped by overflow:hidden. R1 holds 4 hero cards
   with chart bodies, so give it slightly less than middle rows. */
.main--options {
  grid-template-rows:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr)
    minmax(0, 1.05fr)
    minmax(0, 0.95fr)
    minmax(70px, auto);
}
@media (max-width: 820px) { .main--options { grid-template-rows: none; } }


/* Vol hero */
.vol-hero { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.vol-hero__top { display: flex; justify-content: space-between; align-items: baseline; }
.vol-hero__lbl { font-size: 10px; letter-spacing: .14em; color: var(--txt-3); text-transform: uppercase; font-family: var(--font-mono); }
.vol-hero__chg { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.vol-hero__big {
  font-family: var(--font-serif-display);
  font-size: 32px; line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.vol-hero__rule { height: 1px; background: linear-gradient(90deg, var(--gold) 0%, transparent 80%); opacity: .35; margin: 4px 0; }
.vol-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; font-family: var(--font-mono); }
.vol-hero__grid > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--txt-1); }
.vol-hero__grid .lbl { color: var(--txt-3); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }

/* term structure */
.termstr { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.termstr__legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; align-items: center; }
.termstr__legend > span { display: inline-flex; gap: 6px; align-items: center; }
.termstr__hint { margin-left: auto; }
.termstr__sw { width: 10px; height: 2px; display: inline-block; }
.termstr__sw--btc { background: var(--gold); }
.termstr__sw--eth { background: #8b9dc3; }
.termstr__chart { flex: 1; min-height: 80px; }
.termstr__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; color: var(--txt-3); letter-spacing: .08em; }

/* skew */
.skew { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 11px; }
.skew__hd, .skew__row { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 10px; align-items: center; }
.skew__hd { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 4px; }
.skew__ten { color: var(--txt-1); font-weight: 600; }
.skew__track { position: relative; height: 14px; background: rgba(255,255,255,.02); }
.skew__axis { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(201,168,106,.4); }
.skew__bar { position: absolute; top: 0; bottom: 0; }
.skew__bar--in { background: linear-gradient(90deg, rgba(52,211,153,.5), rgba(52,211,153,.9)); }
.skew__bar--out { background: linear-gradient(270deg, rgba(248,113,113,.9), rgba(248,113,113,.5)); }
.skew__v { position: absolute; right: 4px; top: 0; font-size: 9.5px; font-weight: 600; line-height: 14px; }
.skew__foot { font-size: 9.5px; letter-spacing: .08em; padding-top: 4px; }

/* option chain */
.chain { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 10.5px; }
.chain thead th { padding: 4px 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.06); }
.chain__hd-c { color: rgba(52,211,153,.7) !important; text-align: center; border-bottom: 1px solid rgba(52,211,153,.2) !important; }
.chain__hd-p { color: rgba(248,113,113,.7) !important; text-align: center; border-bottom: 1px solid rgba(248,113,113,.2) !important; }
.chain__hd-k { text-align: center; color: var(--gold-soft) !important; }
.chain__sub th { padding: 3px 6px; background: rgba(0,0,0,.2); }
.chain tbody td { padding: 5px 6px; text-align: right; color: var(--txt-2); border-bottom: 1px solid rgba(255,255,255,.03); }
.chain__k { text-align: center !important; color: var(--gold) !important; font-weight: 700; font-size: 11.5px; background: rgba(212,164,87,.06); }
.chain__itm { color: var(--txt-1) !important; font-weight: 600; }
.chain__atm { background: rgba(212,164,87,.04); }
.chain__atm .chain__k { background: var(--gold); color: var(--bg-deep) !important; }

/* maxpain */
.maxpain { display: flex; flex-direction: column; }
.maxpain__hd, .maxpain__row {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 1fr;
  gap: 10px;
  padding: 6px 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}
.maxpain__hd { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.2); border-bottom: 1px solid rgba(255,255,255,.06); }
.maxpain__row { border-bottom: 1px solid rgba(255,255,255,.04); }
.maxpain__row:last-child { border-bottom: 0; }
.maxpain__exp { color: var(--txt-1); font-weight: 600; }
.maxpain__v { text-align: right; font-weight: 600; }
.maxpain__oi { text-align: right; font-size: 10px; }

/* IV surface */
.ivsurf { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.ivsurf thead th { padding: 5px 6px; text-align: right; color: var(--txt-3); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.06); }
.ivsurf tbody th { padding: 5px 8px; text-align: left; color: var(--txt-2); font-size: 10px; font-weight: 500; }
.ivsurf__rn { letter-spacing: .04em; }
.ivsurf tbody td { padding: 6px 6px; text-align: right; color: var(--txt-1); font-weight: 500; border: 1px solid rgba(255,255,255,.02); }

/* GEX grid */
.gex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; height: 100%; }
.gex-cell {
  background: rgba(15,13,9,.96);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 3px;
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.gex-cell__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--txt-3); text-transform: uppercase; }
.gex-cell__v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.gex-cell__sub { font-family: var(--font-mono); font-size: 9.5px; }

/* blocks */
.blocks { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 10.5px; }
.blocks__hd, .blocks__row {
  display: grid;
  grid-template-columns: 62px 76px 1fr 80px 70px 48px;
  gap: 8px;
  padding: 6px 12px;
  align-items: center;
}
.blocks__hd { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.2); border-bottom: 1px solid rgba(255,255,255,.06); }
.blocks__row { border-bottom: 1px solid rgba(255,255,255,.04); }
.blocks__row:last-child { border-bottom: 0; }
.blocks__t { color: var(--txt-3); font-size: 10px; }
.blocks__ven { font-size: 9.5px; letter-spacing: .08em; }
.blocks__leg { color: var(--txt-1); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blocks__sz { text-align: right; font-weight: 600; }
.blocks__px { text-align: right; color: var(--gold-soft); }
.blocks__flow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 2px 4px; border: 1px solid currentColor; border-radius: 1.5px; }
.tag-buy  { color: var(--up); }
.tag-sell { color: var(--dn); }
.tag-strc { color: var(--gold-soft); }
.tag-call { color: var(--up); }
.tag-put  { color: var(--dn); }

/* top OI */
.topoi { display: flex; flex-direction: column; font-family: var(--font-mono); }
.topoi__row {
  display: grid; grid-template-columns: 1fr 70px 48px 76px;
  gap: 8px; align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 10.5px;
}
.topoi__row:last-child { border-bottom: 0; }
.topoi__contr { color: var(--txt-1); font-size: 10px; }
.topoi__oi { text-align: right; color: var(--txt-2); }
.topoi__dir { text-align: center; font-size: 9px; font-weight: 700; padding: 2px 4px; border: 1px solid currentColor; border-radius: 1.5px; letter-spacing: .08em; }
.topoi__ntl { text-align: right; font-weight: 700; }

/* GMG_STANDARDS §5 mobile typography floor */
@media (max-width: 899px) {
  .chain__iv, .chain__oi, .chain__v, .chain__itm,
  .skew__v, .blocks__t, .blocks__ven, .blocks__sz, .blocks__px,
  .topoi__contr, .topoi__dir,
  .ftable thead th, .vol__lbl, .vol__sub,
  .term__exp, .gex__lbl
  { font-size: 11px !important; line-height: 1.25 !important; }
  .chain__strike, .blocks__strike,
  .skew__delta, .vol__val, .term__val, .gex__val,
  .maxpain__strike, .maxpain__exp,
  .topoi__contr.is-active, .topoi__ntl, .topoi__oi
  { font-size: 13px !important; line-height: 1.3 !important; }
}
@media (max-width: 899px) {
  .gex-cell__lbl, .gex-cell__sub, .maxpain__oi,
  .blocks__flow, .options .mute, .options .up, .options .dn,
  .skew__x-lbl, .term__x { font-size: 11px !important; line-height: 1.25 !important; }
}