/* ==========================================================================
 * OST Markets — desktop terminal layout for #ostPredictMobile.
 * The predict module was a 460px phone column on every screen. On desktop
 * (ost-markets-desk.js adds .opm-desk) it becomes a wide trading terminal:
 *   browse  → search + categories, live 5-min rounds in a row, a 4-up market
 *             grid, and a right rail (live trades, your tickets)
 *   market  → chart + trades/holders/comments on the left, a sticky trade panel
 *             on the right (odds, pool, position, buy), buy sheet as a drawer
 * The phone layout is untouched: every rule is scoped to .opm-desk.
 * ========================================================================== */

#ostPredictMobile.opm-desk {
  max-width: 1280px;
  border-radius: 22px;
  border: 1px solid var(--opm-line);
  padding-bottom: 20px;
  overflow: visible;           /* sticky trade panel + rail need this */
}

/* ---------------------------------------------------------------- top bar */
#ostPredictMobile.opm-desk .opm-tb {
  padding: 16px 22px;
  border-radius: 22px 22px 0 0;
  top: 64px;                   /* clears the site nav */
}
#ostPredictMobile.opm-desk .opm-htitle { font-size: 26px; }

/* ---------------------------------------------------------------- browse */
#ostPredictMobile.opm-desk #opmBrowse.on {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "tb tb" "main rail";
  column-gap: 18px;
}
#ostPredictMobile.opm-desk #opmBrowse > .opm-tb { grid-area: tb; }
#ostPredictMobile.opm-desk #opmBrowse > .opm-scroll { grid-area: main; padding: 18px 0 0 22px; min-width: 0; }
#ostPredictMobile.opm-desk #opmBrowse > .omd-rail { grid-area: rail; padding: 18px 22px 0 0; }

#ostPredictMobile.opm-desk .opm-search { max-width: 640px; }
#ostPredictMobile.opm-desk .opm-chips { flex-wrap: wrap; overflow: visible; }

#ostPredictMobile.opm-desk .opm-feat {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  overflow: visible; gap: 12px;
}
#ostPredictMobile.opm-desk .opm-fcard { flex: none; max-width: none; transition: transform .16s, border-color .16s; }
#ostPredictMobile.opm-desk .opm-fcard:hover { transform: translateY(-2px); border-color: var(--opm-line3); }

#ostPredictMobile.opm-desk .opm-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#ostPredictMobile.opm-desk .opm-mcard { min-height: 158px; transition: transform .16s, border-color .16s, box-shadow .16s; }
#ostPredictMobile.opm-desk .opm-mcard:hover { transform: translateY(-2px); border-color: var(--opm-line3); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
#ostPredictMobile.opm-desk .opm-mcard .mq { font-size: 14px; line-height: 1.35; }

/* ---------------------------------------------------------------- rail */
.omd-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.omd-box {
  position: sticky; top: 150px;
  border-radius: 16px; border: 1px solid var(--opm-line); background: rgba(10, 20, 32, .7);
  padding: 12px 14px;
}
.omd-box + .omd-box { position: static; }
.omd-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--opm-ink3); margin-bottom: 8px; }
.omd-h .d { width: 7px; height: 7px; border-radius: 50%; background: var(--opm-yes); box-shadow: 0 0 8px var(--opm-yes); }
.omd-h .sp { flex: 1; }
.omd-h button { border: 0; background: none; color: var(--opm-cyan); font: inherit; font-size: 11px; cursor: pointer; letter-spacing: .04em; }
.omd-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.omd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 9px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--opm-line); cursor: pointer; }
.omd-row:last-child { border-bottom: 0; }
.omd-row:hover .omd-t { color: var(--opm-ink); }
.omd-row.in { animation: omdIn .5s ease-out; }
@keyframes omdIn { from { opacity: 0; transform: translateY(-6px); background: rgba(127, 216, 255, .08); } }
.omd-side { font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.omd-side.y { color: var(--opm-yes); background: var(--opm-yes-dim); }
.omd-side.n { color: var(--opm-no); background: var(--opm-no-dim); }
.omd-t { font-size: 12px; color: var(--opm-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omd-a { font-family: var(--opm-mono); font-size: 11.5px; font-weight: 700; color: var(--opm-ink); text-align: right; }
.omd-m { grid-column: 2 / 4; display: flex; justify-content: space-between; font-family: var(--opm-mono); font-size: 10.5px; color: var(--opm-ink3); }
.omd-empty { font-size: 12px; color: var(--opm-ink3); padding: 8px 2px; line-height: 1.5; }
.omd-st { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.omd-st.open { color: var(--opm-cyan); } .omd-st.won { color: var(--opm-yes); } .omd-st.lost { color: var(--opm-no); }

/* ---------------------------------------------------------------- market detail */
#ostPredictMobile.opm-desk #opmDetail .opm-scroll { padding: 18px 22px 0; }
#ostPredictMobile.opm-desk .omd-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start;
}
#ostPredictMobile.opm-desk .omd-detail > .opm-qhead { grid-column: 1 / -1; margin: 2px 0 2px; }
#ostPredictMobile.opm-desk .omd-detail .opm-qhead h1 { font-size: 26px; }
#ostPredictMobile.opm-desk .omd-l { min-width: 0; }
#ostPredictMobile.opm-desk .omd-r { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 0; }
#ostPredictMobile.opm-desk .omd-r .opm-yn { margin-bottom: 12px; }
#ostPredictMobile.opm-desk .opm-g { height: 260px !important; }
#ostPredictMobile.opm-desk #opmStdG { height: 220px !important; }
#ostPredictMobile.opm-desk .opm-pxnow { font-size: 42px; }
#ostPredictMobile.opm-desk .opm-prob .pv { font-size: 44px; }

/* Buy bar lives in the trade panel on desktop, not pinned to the page bottom. */
#ostPredictMobile.opm-desk .omd-r .opm-buybar {
  position: static !important; display: flex !important; gap: 10px; padding: 0; margin-top: 4px;
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
}
#ostPredictMobile.opm-desk .omd-r .opm-buybar button { padding: 16px; font-size: 15.5px; }
#ostPredictMobile.opm-desk .omd-r .opm-buybar button:hover { filter: brightness(1.08); }

/* section#wallet carries `perspective:1200px` (desktop 3D tilt), which makes it the
   containing block for every position:fixed descendant — the drawer and scrim were
   positioned against a multi-thousand-px section, i.e. off-screen. Phones already
   drop it (mobile-shell.css); the desktop terminal does the same. */
html.omd-on section#wallet { perspective: none !important; transform: none !important; filter: none !important; }

/* Buy / sell sheet → right-hand drawer. */
#ostPredictMobile.opm-desk .opm-scrim { position: fixed !important; inset: 0 !important; z-index: 1000300 !important; }
#ostPredictMobile.opm-desk .opm-sheet {
  position: fixed !important; left: auto !important; right: 20px !important; top: 84px !important; bottom: 20px !important;
  width: 420px; max-height: none !important; z-index: 1000310 !important;
  border-radius: 22px !important; border: 1px solid var(--opm-line3) !important;
  transform: translateX(calc(100% + 40px)) !important;
  overflow-y: auto;
}
#ostPredictMobile.opm-desk .opm-sheet.open { transform: none !important; }
/* The section rail and the dock would sit on top of the open drawer. */
html.omd-on body:has(#opmSheet.open) .ost-dock,
html.omd-on body:has(#opmSheet.open) .nx-dock { opacity: 0 !important; pointer-events: none !important; }
#ostPredictMobile.opm-desk .opm-sheet .opm-grab { display: none; }

@media (max-width: 1180px) {
  #ostPredictMobile.opm-desk #opmBrowse.on { grid-template-columns: minmax(0, 1fr) 280px; }
  #ostPredictMobile.opm-desk .omd-detail { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .omd-row.in { animation: none; }
}