/* ============================================================
   PREDICTION MARKET PRODUCT MOCK
   Coded illustration of the trader panel: no screenshots, no
   third-party UI, fictional markets only.
   ============================================================ */

.pm-panel {
  --pm-bg: #0a1730;
  --pm-surface: #0f2142;
  --pm-surface-2: #142a52;
  --pm-line: rgba(255, 255, 255, 0.08);
  --pm-text: #f2f6fb;
  --pm-text-2: rgba(226, 235, 245, 0.68);
  --pm-text-3: rgba(226, 235, 245, 0.46);
  --pm-yes: #3ec79b;
  --pm-yes-bg: rgba(62, 199, 155, 0.14);
  --pm-no: #f07a7a;
  --pm-no-bg: rgba(240, 122, 122, 0.14);
  --pm-brand: #5fb3bd;

  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 14px;
  background: var(--pm-bg);
  color: var(--pm-text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  user-select: none;
}

.pm-panel * {
  box-sizing: border-box;
}

/* Top bar */
.pm-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-line);
  background: rgba(255, 255, 255, 0.02);
}

.pm-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.pm-brand::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--pm-brand), #2a6168);
}

.pm-tabs {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.pm-tab {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--pm-text-2);
  font-size: 12px;
}

.pm-tab.is-active {
  background: var(--pm-surface-2);
  color: var(--pm-text);
}

.pm-top__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(95, 179, 189, 0.14);
  color: #bfe3e7;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pm-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pm-brand);
}

.pm-balance-pill {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--pm-surface);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-balance-pill small {
  margin-right: 6px;
  color: var(--pm-text-3);
  font-weight: 500;
}

/* Body */
.pm-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.pm-col {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.pm-card {
  padding: 14px;
  border: 1px solid var(--pm-line);
  border-radius: 12px;
  background: var(--pm-surface);
}

.pm-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.pm-card__title {
  color: var(--pm-text);
  font-size: 13px;
  font-weight: 650;
}

.pm-card__meta {
  color: var(--pm-text-3);
  font-size: 11px;
}

/* Markets */
.pm-markets {
  display: grid;
  gap: 8px;
}

.pm-market {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pm-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.pm-market__cat {
  display: inline-block;
  margin-bottom: 3px;
  color: var(--pm-text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pm-market__q {
  display: block;
  overflow: hidden;
  color: var(--pm-text);
  font-size: 12.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-market__bar {
  display: block;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--pm-no-bg);
}

.pm-market__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pm-yes);
}

.pm-market__actions {
  display: flex;
  gap: 6px;
}

.pm-btn {
  min-width: 62px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.pm-btn--yes {
  background: var(--pm-yes-bg);
  color: var(--pm-yes);
}

.pm-btn--no {
  background: var(--pm-no-bg);
  color: var(--pm-no);
}

.pm-market.is-selected {
  border-color: rgba(62, 199, 155, 0.45);
  background: rgba(62, 199, 155, 0.06);
}

/* Ticket */
.pm-ticket {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pm-ticket__cell {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.pm-ticket__cell span {
  display: block;
  color: var(--pm-text-3);
  font-size: 10.5px;
}

.pm-ticket__cell strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.pm-ticket__submit {
  grid-column: 1 / -1;
  padding: 9px;
  border-radius: 8px;
  background: var(--pm-yes);
  color: #06261c;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Account */
.pm-stat {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pm-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pm-up {
  color: var(--pm-yes);
  font-size: 12px;
  font-weight: 650;
}

.pm-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.pm-phase {
  padding: 7px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--pm-text-3);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
}

.pm-phase.is-done {
  background: rgba(95, 179, 189, 0.16);
  color: #bfe3e7;
}

.pm-phase.is-current {
  background: var(--pm-brand);
  color: #052326;
}

.pm-rules {
  display: grid;
  gap: 7px;
}

.pm-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  color: var(--pm-text-2);
  font-size: 12px;
}

.pm-rule b {
  color: var(--pm-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pm-meter {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
}

.pm-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pm-brand);
}

.pm-payout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pm-payout strong {
  display: block;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.pm-payout span {
  color: var(--pm-text-3);
  font-size: 11px;
}

.pm-status {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239, 178, 93, 0.16);
  color: #f3c784;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pm-note {
  padding: 8px 12px;
  border-top: 1px solid var(--pm-line);
  color: var(--pm-text-3);
  font-size: 10.5px;
  text-align: center;
}

/* Placement inside the homepage hero frame */
.hero__deck .pm-panel {
  border-radius: 14px;
}

/* Section visual wrapper for landing pages */
.pm-visual {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) 0 0;
}

.pm-visual__frame {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  box-shadow: var(--shadow-xl);
}

.seo-hero .pm-panel {
  box-shadow: var(--shadow-xl);
}

/* Compact variant used beside hero copy */
.pm-panel--compact .pm-body {
  grid-template-columns: 1fr;
}

.pm-panel--compact .pm-tabs,
.pm-panel--compact .pm-col--side .pm-card:nth-child(n + 3) {
  display: none;
}

@media (max-width: 900px) {
  .pm-body {
    grid-template-columns: 1fr;
  }

  .pm-col--side .pm-card:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 560px) {
  .pm-panel {
    font-size: 12px;
  }

  .pm-tabs,
  .pm-balance-pill small {
    display: none;
  }

  .pm-btn {
    min-width: 52px;
  }

  .pm-market:nth-child(n + 4) {
    display: none;
  }
}

/* ============================================================
   PREDICTION MARKET LANDING PAGES
   ============================================================ */

.pm-page section.pm-band {
  padding: var(--section-padding) 0;
  background: var(--surface);
  border-block: 0;
}

.pm-page section.pm-band--alt {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

.pm-page .seo-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pm-hero-visual {
  min-width: 0;
}

.pm-hero-visual .pm-panel {
  box-shadow: var(--shadow-xl);
}

.pm-disclosure {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--brand-100);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  font-size: var(--text-sm);
}

.pm-disclosure strong {
  color: var(--brand-800);
  font-weight: 600;
}

.pm-page .seo-cta__inner .btn + .btn {
  margin-left: var(--space-2);
}

.pm-page .operator-need p a,
.pm-page .seo-faq__item a {
  color: var(--link);
  font-weight: 600;
}

@media (max-width: 900px) {
  .pm-page .seo-hero__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .seo-decision td[data-label]::before {
    content: attr(data-label);
  }

  .pm-page .seo-cta__inner .btn {
    width: 100%;
  }

  .pm-page .seo-cta__inner .btn + .btn {
    margin: var(--space-3) 0 0;
  }
}

/* Compact hero panel: three markets, account and rules only */
.pm-panel--compact .pm-market:nth-child(n + 4),
.pm-panel--compact .pm-col:first-child .pm-card:nth-child(2) {
  display: none;
}
.feature-panel__media--mock { padding: 0; background: none; border: 0; }

.feature-panel__copy a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 3px;
}

/* Phone hero: keep the panel short */
@media (max-width: 900px) {
  .hero__deck .pm-col:first-child .pm-card:nth-child(2),
  .hero__deck .pm-col--side,
  .hero__deck .pm-market:nth-child(n + 4) {
    display: none;
  }
}

/* Product image pairs on owner pages */
.pm-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.pm-shots .feature-panel__media { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pm-shots .feature-panel__media img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .pm-shots { grid-template-columns: minmax(0, 1fr); }
}