/* Market-page position + open-order rows (window.pmPositionCard / pmOrderRow in
   positions.js). Compact ONE row each: no market title (we're already on the market
   page), lead with the OUTCOME as a green/red tag — like the portfolio history badge.
   Unique .pmp-* prefix -> cannot affect anything else. Portfolio does NOT load this. */

.pmp-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.pmp-ic {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--border); flex: 0 0 auto; background: var(--bg-surface, #161b24);
}

/* outcome/option as a filled tag (green = yes-side, red = no-side) */
.pmp-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 160px; }
.pmp-out {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; font-family: var(--font-display, 'Inter', 'Heebo', sans-serif);
  max-width: 60%; overflow: hidden; text-overflow: ellipsis;
}
.pmp-out.yes { background: var(--green-soft); color: var(--green); }
.pmp-out.no  { background: var(--red-soft);   color: var(--red); }
.pmp-sub {
  font-size: 11.5px; color: var(--text-muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmp-px { direction: ltr; unicode-bidi: isolate; }

/* value over P&L (stacked). align-items:flex-end = inline-END of the column, which
   follows page direction (right in LTR, left in RTL) = "end of the col" on desktop.
   Do NOT force direction:ltr on the container (that would make end/start physical and
   break RTL); only the number spans below force LTR so signs/% never reorder. */
.pmp-val {
  flex: 0 0 auto; margin-inline-start: auto;
}
/* block spans, each numeric isolated LTR so the sign/$/()% never reorder in RTL.
   Because the spans are direction:ltr, "start/end" can't follow page direction — so we
   set PHYSICAL text-align per page dir below. Desktop = column END, mobile = START. */
.pmp-money { display: block; font-size: 14px; font-weight: 700; color: var(--text); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pmp-pnl { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pmp-pnl.pos  { color: var(--green); }
.pmp-pnl.neg  { color: var(--red); }
.pmp-pnl.zero { color: var(--text-muted); }
/* desktop: value text at the column END (LTR=right, RTL=left) */
.pmp-money, .pmp-pnl { text-align: right; }
[dir="rtl"] .pmp-money, [dir="rtl"] .pmp-pnl { text-align: left; }

.pmp-sell {
  flex: 0 0 auto; padding: 7px 15px; background: #315EFF; color: #fff; border: 0;
  border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: filter .15s;
}
.pmp-sell:hover { filter: brightness(1.08); }

/* open limit order row */
.pmp-pending {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent); margin-inline-start: auto;
}
.pmp-cancel {
  flex: 0 0 auto; padding: 7px 13px; background: none; border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: color .15s;
}
.pmp-cancel:hover { color: var(--text); }

/* MOBILE: row 1 = icon + outcome tag + shares; row 2 = value/P&L at the START,
   Sell/Cancel pushed to the END. Forcing the main cell to a full-width basis makes
   the value + button wrap together onto the second line. */
@media (max-width: 768px) {
  .pmp-main { flex: 1 1 calc(100% - 44px); }
  /* value over P&L stays stacked, sits at the START of row 2 */
  .pmp-val { margin-inline-start: 0; order: 1; }
  /* mobile: value text at the row START (LTR=left, RTL=right) */
  .pmp-money, .pmp-pnl { text-align: left; }
  [dir="rtl"] .pmp-money, [dir="rtl"] .pmp-pnl { text-align: right; }
  .pmp-sell, .pmp-cancel { margin-inline-start: auto; order: 2; align-self: center; }
  .pmp-pending { order: 0; }
}
[dir="rtl"] .pmp-px { direction: ltr; unicode-bidi: isolate; }

/* Loading state: spinner + skeleton lines shown while /trade/positions fetches
   (injected by positions.js loadPositions wrapper). Reuses the global
   .loading-spinner / @keyframes spin from style.css. */
.pmp-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 2px; min-height: 34px;
}
.pmp-skel { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.pmp-skel-line {
  display: block; height: 11px; border-radius: 6px; width: 70%;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 37%, var(--bg-card) 63%);
  background-size: 400% 100%;
  animation: pmpSkel 1.3s ease-in-out infinite;
}
.pmp-skel-line.short { width: 40%; }
@keyframes pmpSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* DESKTOP: tighter, smaller type for the compact market-page rows */
@media (min-width: 769px) {
  .pmp-row { padding: 7px 11px; gap: 9px; }
  .pmp-ic { width: 28px; height: 28px; }
  .pmp-out { font-size: 10.5px; padding: 2px 7px; }
  .pmp-sub { font-size: 11px; }
  .pmp-money { font-size: 14px; }
  .pmp-pnl { font-size: 12.5px; }
  .pmp-sell { padding: 6px 13px; font-size: 12px; }
  .pmp-cancel { padding: 6px 11px; font-size: 12px; }
}