/* Mobile layout repair + Outcome.xyz live-data motion.
   Observed on outcome.xyz 2026.08.29.1: Framer Motion tween 220ms,
   ease cubic-bezier(0.32, 0.72, 0, 1); Vaul sheets 500ms same ease;
   Yes/No sliding pill via shared layoutId; tabular-nums deltas.
   Frozen auth modal chrome is out of scope. */

:root {
  --hg-silk-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hg-silk-tick: 220ms;
  --hg-silk-bar: 220ms;
  --hg-silk-sheet: 500ms;
}

body.hg-markets.hg-predict-market-page .pm-card-outcome-row__pct,
body.hg-markets.hg-predict-market-page .pm-card-side__chance,
body.hg-markets.hg-predict-market-page .pm-card-binary-side__multiplier,
body.hg-markets.hg-predict-market-page .pm-live-chip,
body.hg-markets.hg-predict-market-page .pm-book-row,
body.hg-markets.hg-predict-market-page .pm-book-mid,
body.hg-markets.hg-predict-market-page .pm-mobile-trade-dock strong,
body.hg-markets.hg-predict-market-page .pm-detail-stats strong,
body.hg-markets.hg-predict-market-page #chartCurrentValue,
body.hg-markets.hg-predict-market-page #chartValueDelta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body.hg-markets.hg-predict-market-page .pm-card-outcome-row__pct,
body.hg-markets.hg-predict-market-page .pm-card-side__chance,
body.hg-markets.hg-predict-market-page .pm-card-binary-side__multiplier,
body.hg-markets.hg-predict-market-page .pm-book-row span,
body.hg-markets.hg-predict-market-page .pm-book-row strong,
body.hg-markets.hg-predict-market-page .pm-book-mid span,
body.hg-markets.hg-predict-market-page #chartCurrentValue,
body.hg-markets.hg-predict-market-page .pm-detail-stats strong {
  transition:
    color var(--hg-silk-tick) var(--hg-silk-ease),
    background-color var(--hg-silk-tick) var(--hg-silk-ease),
    text-shadow var(--hg-silk-tick) var(--hg-silk-ease),
    box-shadow var(--hg-silk-tick) var(--hg-silk-ease);
}

body.hg-markets.hg-predict-market-page .pm-book-row span:first-child::before {
  transition: width var(--hg-silk-bar) var(--hg-silk-ease);
}

body.hg-markets.hg-predict-market-page .is-live-pending {
  opacity: 0.55;
  animation: hg-silk-pending 1.5s var(--hg-silk-ease) infinite;
}

body.hg-markets.hg-predict-market-page #chartCurrentValue.is-live-tick.is-up,
body.hg-markets.hg-predict-market-page .pm-detail-stats [data-stat="chance"] strong.is-live-tick.is-up {
  color: #6fe8d2;
  text-shadow: 0 0 28px rgba(80, 227, 194, 0.45);
  background: rgba(80, 227, 194, 0.1);
}

body.hg-markets.hg-predict-market-page #chartCurrentValue.is-live-tick.is-down,
body.hg-markets.hg-predict-market-page .pm-detail-stats [data-stat="chance"] strong.is-live-tick.is-down {
  color: #ff9b9b;
  text-shadow: 0 0 24px rgba(255, 123, 120, 0.38);
  background: rgba(242, 54, 69, 0.1);
}

@keyframes hg-silk-pending {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  body.hg-markets.hg-predict-market-page .is-live-pending {
    animation: none;
  }

  body.hg-markets.hg-predict-market-page .pm-card-outcome-row__pct,
  body.hg-markets.hg-predict-market-page .pm-book-row span:first-child::before,
  body.hg-markets.hg-predict-market-page #chartCurrentValue,
  body.hg-markets.hg-predict-market-page #mobileOutcomePair:not(.is-single)::before {
    transition: none;
  }
}

@media (max-width: 760px) {
  html body.hg-markets.hg-predict-market-page .pm-legal-chrome,
  html body.hg-markets.hg-predict-market-page.pm-detail-open .pm-legal-chrome {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 25 !important;
    display: inline-flex !important;
    width: max-content;
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  html body.hg-markets.hg-predict-market-page.pm-detail-open .pm-legal-chrome {
    bottom: calc(var(--pm-legal-clearance, 276px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 40 !important;
  }

  html[dir="rtl"] body.hg-markets.hg-predict-market-page .pm-legal-chrome,
  html[dir="rtl"] body.hg-markets.hg-predict-market-page.pm-detail-open .pm-legal-chrome {
    right: auto !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }

  html body.hg-markets.hg-predict-market-page .pm-legal-chrome > a {
    display: inline !important;
  }

  html body.hg-markets.hg-predict-market-page .pm-legal-chrome > * {
    pointer-events: auto;
  }

  html body.hg-markets.hg-predict-market-page #pmLocaleLabel {
    max-width: none;
    overflow: visible;
    display: inline;
  }

  body.hg-markets.hg-predict-market-page .pm-chip-row {
    width: 100%;
    margin: 0 0 8px;
    gap: 8px;
  }

  body.hg-markets.hg-predict-market-page .pm-live-chip {
    width: 100%;
    max-width: none;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
  }

  body.hg-markets.hg-predict-market-page:not(.pm-detail-open) .pm-market-card {
    gap: 8px;
    padding: 12px 12px 10px;
  }

  body.hg-markets.hg-predict-market-page:not(.pm-detail-open) .pm-card-binary-side {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-detail-shell[data-experience="v2"] {
    --pm-chance-size: clamp(2.75rem, 16vw, 3.85rem) !important;
    --pm-title-size: clamp(0.7rem, 3.05vw, 0.9rem) !important;
    --pm-chance-gap: 0.35rem !important;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open #chartCurrentValue {
    display: inline-block !important;
    padding: 4px 8px 4px 0;
    border-radius: 12px;
    font-size: var(--pm-chance-size, 2.75rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.04em !important;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open #chartValueDelta {
    display: inline-flex !important;
    margin-top: 6px;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-detail-stats [data-stat="chance"] strong {
    font-size: 1.35rem !important;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-detail-stats [data-stat="spread"],
  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-book-mid,
  body.hg-markets.hg-predict-market-page.pm-detail-open #bookSpread,
  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-book-spread,
  html body.hg-markets.hg-predict-market-page.pm-detail-open .pm-book-panel,
  html body.hg-markets.hg-predict-market-page.pm-detail-open .pm-book-panel--coin-space,
  html body.hg-markets.hg-predict-market-page.pm-detail-open .pm-book-panel--coin-space[data-depth-mode="data"] {
    display: none !important;
  }

  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-chart-toolbar__title-block #detailTitle,
  body.hg-markets.hg-predict-market-page.pm-detail-open .pm-detail-shell[data-experience="v2"] #detailTitle {
    font-size: var(--pm-title-size, 0.92rem) !important;
    line-height: 1.25 !important;
    max-width: 100%;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-book-table .pm-book-head,
  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-book-table .pm-book-row,
  body.hg-markets.hg-predict-market-page #orderBookTable .pm-book-head,
  body.hg-markets.hg-predict-market-page #orderBookTable .pm-book-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
    gap: 6px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 0;
    overflow: hidden;
  }

  body.hg-markets.hg-predict-market-page #orderBookTable .pm-book-head span,
  body.hg-markets.hg-predict-market-page #orderBookTable .pm-book-row span,
  body.hg-markets.hg-predict-market-page #orderBookTable .pm-book-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-shell[data-experience="v2"] .pm-chart-wrap {
    min-height: min(58vh, 480px) !important;
    max-height: none !important;
    height: min(62vh, 520px) !important;
  }

  body.hg-markets.hg-predict-market-page .pm-mobile-trade-dock {
    z-index: 50;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-shell[data-experience="v2"] .pm-ticket-panel {
    transition:
      transform var(--hg-silk-sheet) var(--hg-silk-ease),
      visibility 0s linear var(--hg-silk-sheet);
  }

  body.hg-markets.hg-predict-market-page .pm-detail-shell[data-experience="v2"] .pm-ticket-panel.is-mobile-open {
    transition:
      transform var(--hg-silk-sheet) var(--hg-silk-ease),
      visibility 0s linear 0s;
  }

  body.hg-markets.hg-predict-market-page #mobileOutcomePair:not([hidden]):not(.is-single) {
    display: flex !important;
    position: relative;
    height: 56px;
    padding: 4px;
    gap: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
  }

  body.hg-markets.hg-predict-market-page #mobileOutcomePair:not([hidden]):not(.is-single)::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: rgba(80, 227, 194, 0.12);
    transform: translate3d(0, 0, 0);
    transition:
      transform var(--hg-silk-tick) var(--hg-silk-ease),
      background-color var(--hg-silk-tick) var(--hg-silk-ease);
    z-index: 0;
    pointer-events: none;
  }

  body.hg-markets.hg-predict-market-page #mobileOutcomePair[data-selected-side="1"]::before {
    transform: translate3d(100%, 0, 0);
    background: rgba(242, 54, 69, 0.12);
  }

  body.hg-markets.hg-predict-market-page #mobileOutcomePair:not(.is-single) .pm-outcome-choice {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-height: 48px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-items: center;
    text-align: center;
  }

  body.hg-markets.hg-predict-market-page #mobileOutcomePair:not(.is-single) .pm-outcome-choice.is-active > span {
    color: inherit;
  }
}

@media (max-width: 430px) {
  body.hg-markets.hg-predict-market-page .pm-detail-shell[data-experience="v2"] .pm-chart-wrap {
    min-height: min(54vh, 440px) !important;
    max-height: none !important;
    height: min(58vh, 480px) !important;
  }
}