/* ==========================================================================
 * OST · Market Chart — styles for ost-market-chart.js (market page chart,
 * Yes/No legend, ranges, multi-outcome ladder). Scoped to #ostPredictMobile.
 * ========================================================================== */
#ostPredictMobile .mkc { text-align: left; margin-top: 14px; }
#ostPredictMobile .mkc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
#ostPredictMobile .mkc-legend { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--opm-bg2); border: 1px solid var(--opm-line); }
#ostPredictMobile .mkc-legend button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--opm-ink3);
  font: inherit; font-size: 12px; font-weight: 800; padding: 5px 11px !important; border-radius: 999px; cursor: pointer;
  min-height: 0 !important; line-height: 1.2; transition: background .15s, color .15s;
}
#ostPredictMobile .mkc-legend button i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
#ostPredictMobile .mkc-legend button b { font-family: var(--opm-mono); font-weight: 800; }
#ostPredictMobile .mkc-legend .y { color: var(--opm-yes); } #ostPredictMobile .mkc-legend .n { color: var(--opm-no); }
#ostPredictMobile .mkc-legend .y.on { background: var(--opm-yes-dim); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .45); }
#ostPredictMobile .mkc-legend .n.on { background: var(--opm-no-dim); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .45); }
#ostPredictMobile .mkc-legend button.on i { opacity: 1; }
#ostPredictMobile .mkc-chg { font-family: var(--opm-mono); font-size: 12px; font-weight: 800; white-space: nowrap; }
#ostPredictMobile .mkc-chg.up { color: var(--opm-yes); } #ostPredictMobile .mkc-chg.down { color: var(--opm-no); } #ostPredictMobile .mkc-chg.flat { color: var(--opm-ink3); }
#ostPredictMobile .mkc-chartbox { position: relative; }
#ostPredictMobile .mkc-chart { display: block; width: 100%; height: 220px; cursor: crosshair; touch-action: pan-y; border-radius: 10px; }
#ostPredictMobile .mkc-tip {
  position: absolute; top: 2px; pointer-events: none; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--opm-mono); font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--opm-ink2);
  padding: 5px 9px; border-radius: 9px; background: rgba(5, 11, 19, .94); border: 1px solid var(--opm-line2); opacity: 0; transition: opacity .12s;
}
#ostPredictMobile .mkc-tip b { color: var(--opm-ink); font-size: 12px; }
#ostPredictMobile .mkc-tip.on { opacity: 1; }
#ostPredictMobile .mkc-over {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  font-size: 12px; color: var(--opm-ink3);
}
#ostPredictMobile .mkc-over.on { display: flex; }
#ostPredictMobile .mkc-over button {
  pointer-events: auto; border: 1px solid var(--opm-line2); background: var(--opm-card2); color: var(--opm-ink); font: inherit; font-size: 12px; font-weight: 800;
  padding: 6px 12px !important; border-radius: 999px; cursor: pointer; min-height: 0 !important; line-height: 1.2;
}
#ostPredictMobile .mkc-ranges { display: flex; gap: 4px; margin-top: 8px; align-items: center; }
#ostPredictMobile .mkc-ranges button {
  border: 1px solid var(--opm-line); background: var(--opm-bg2); color: var(--opm-ink3); font-family: var(--opm-mono); font-size: 11px; font-weight: 700;
  padding: 5px 10px !important; border-radius: 8px; cursor: pointer; min-height: 0 !important; line-height: 1.2;
}
#ostPredictMobile .mkc-ranges button.on { background: var(--opm-card3); color: var(--opm-ink); border-color: var(--opm-line2); }
#ostPredictMobile .mkc-ranges .src { margin-left: auto; font-size: 10.5px; color: var(--opm-ink3); font-family: var(--opm-mono); white-space: nowrap; }

/* multi-outcome ladder */
#ostPredictMobile .mkc-ladder { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
#ostPredictMobile .mkc-lh { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--opm-ink3); margin-bottom: 2px; }
#ostPredictMobile .mkc-lh span { text-transform: none; letter-spacing: 0; font-weight: 600; }
#ostPredictMobile .mkc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 56px; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--opm-line); background: var(--opm-bg2); color: var(--opm-ink2); font: inherit; font-size: 13px; font-weight: 700; text-align: left;
  padding: 8px 10px !important; border-radius: 10px; cursor: pointer; min-height: 0 !important; line-height: 1.25; transition: background .15s, border-color .15s;
}
#ostPredictMobile .mkc-row:hover { background: var(--opm-card2); }
#ostPredictMobile .mkc-row.on { background: var(--opm-yes-dim); border-color: rgba(52, 211, 153, .5); color: var(--opm-ink); }
#ostPredictMobile .mkc-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ostPredictMobile .mkc-row .bar { height: 6px; border-radius: 4px; background: rgba(127, 216, 255, .1); overflow: hidden; }
#ostPredictMobile .mkc-row .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--opm-yes2), var(--opm-yes)); }
#ostPredictMobile .mkc-row .p { font-family: var(--opm-mono); font-weight: 800; text-align: right; color: var(--opm-yes); }

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  #ostPredictMobile .mkc-chart { height: 170px; }
  #ostPredictMobile .mkc-row { grid-template-columns: minmax(0, 1fr) 64px 52px; font-size: 12px; }
  #ostPredictMobile .mkc-ranges .src { display: none; }
}