/* DPX v0.6.1 post-R4 amended patches. Loaded after every earlier layout layer. */

/* Patch 1: narrower phone action buttons and larger prediction numbers. */
@media (max-width: 600px) and (orientation: portrait) {
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-head,
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row {
    grid-template-columns: 102px 70px 58px 46px minmax(58px, 1fr) !important;
    gap: 1px !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .prediction-action-cell {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 36px 28px 24px !important;
    gap: 2px !important;
    padding-inline: 1px !important;
    overflow: hidden !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .pred-side {
    font-size: clamp(13px, 3.6vw, 14px) !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row :is(.pred-minute, .pred-conf) {
    font-size: clamp(7.5px, 2.05vw, 8.2px) !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row :is(.pred-side, .pred-minute, .pred-conf) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row > span em,
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .prediction-countdown-value {
    font-size: clamp(10.5px, 3vw, 12px) !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
  }
}

@media (min-width: 371px) and (max-width: 600px) and (orientation: portrait) {
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-head,
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row {
    grid-template-columns: 102px 74px 62px 46px minmax(58px, 1fr) !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  body#dpxRoot .trade-card #predictions.prediction-table-layout {
    grid-template-columns: 112px 72px 58px 44px minmax(70px, 1fr) !important;
    gap: 2px !important;
  }
  body#dpxRoot .trade-card #predictions.prediction-table-layout .prediction-action-cell {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body#dpxRoot .trade-card #predictions.prediction-table-layout .prediction-table-head {
    font-size: clamp(10px, 1.25vw, 12px) !important;
  }
  body#dpxRoot .trade-card #predictions.prediction-table-layout .prediction-info-cell,
  body#dpxRoot .trade-card #predictions.prediction-table-layout .prediction-info-cell * {
    font-size: clamp(11px, 1.5vw, 13px) !important;
    font-weight: 800 !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-head,
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row {
    grid-template-columns: 112px 72px 58px 44px minmax(70px, 1fr) !important;
    gap: 2px !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .prediction-action-cell {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 40px 32px 26px !important;
    gap: 2px !important;
    padding-inline: 2px !important;
    overflow: hidden !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .pred-side { font-size: clamp(12px, 1.7vw, 15px) !important; }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row :is(.pred-minute, .pred-conf) { font-size: clamp(8px, 1.05vw, 10px) !important; }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row :is(.pred-side, .pred-minute, .pred-conf) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row > span em,
  html body#dpxRoot.phone-tab-layout .trade-card #predictions .prediction-mobile-row .prediction-countdown-value {
    font-size: clamp(11px, 1.5vw, 13px) !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
  }
  html body#dpxRoot #autoTradingCard :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    font-size: 16px !important;
    touch-action: manipulation !important;
    transform: none !important;
  }
}

/* Patch 2: preserve labels, compact supporting text, and prevent iOS focus zoom. */
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel, #phoneSettingPanel)
  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  font-size: 16px !important;
  line-height: 1.2 !important;
  min-height: 36px !important;
  touch-action: manipulation !important;
  transform: none !important;
}
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel, #phoneSettingPanel)
  :is(summary small, .logic-note, .auto-help small, .field-help, .supporting-text) {
  font-size: 8px !important;
  line-height: 1.15 !important;
}
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel, #phoneSettingPanel)[aria-hidden="false"] {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel) .six-horizon-grid {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 64px repeat(6, minmax(0, 1fr)) !important;
  column-gap: 1px !important;
  row-gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  overflow: hidden !important;
}
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel) .six-horizon-grid .horizon-row-label {
  box-sizing: border-box !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding-right: 2px !important;
  white-space: normal !important;
  overflow: visible !important;
}
html body#dpxRoot.phone-tab-layout :is(#phoneEntryPanel, #phoneAdjustPanel) .six-horizon-grid :is(.horizon-grid-head, input) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 1px !important;
}

/* Patch 3: first three ledger columns are frozen on every supported viewport. */
html body#dpxRoot #ledgerTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
}
html body#dpxRoot #ledgerTable .sticky-col {
  position: sticky !important;
  background: #1d2d43 !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.13) !important;
  z-index: 20 !important;
  background-clip: padding-box !important;
}
html body#dpxRoot #ledgerTable thead .sticky-col {
  background: #20324a !important;
  z-index: 30 !important;
}
html body#dpxRoot #ledgerTable .ledger-col-tradeCount {
  width: 96px !important; min-width: 96px !important; max-width: 96px !important;
}
html body#dpxRoot #ledgerTable .ledger-col-side {
  width: 58px !important; min-width: 58px !important; max-width: 58px !important;
}
html body#dpxRoot #ledgerTable .ledger-col-stake {
  width: 72px !important; min-width: 72px !important; max-width: 72px !important;
}
html body#dpxRoot #ledgerTable .sticky-1 { left: 0 !important; }
html body#dpxRoot #ledgerTable .sticky-2 { left: 96px !important; }
html body#dpxRoot #ledgerTable .sticky-3 { left: 154px !important; }

/* Every administrator prediction snapshot is a complete single-line value.
   Earlier fixed-width layers let the text paint across adjacent columns. */
html body#dpxRoot #ledgerTable th[class*="ledger-col-pred"],
html body#dpxRoot #ledgerTable td.prediction-combined-cell {
  box-sizing: border-box !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  padding-inline: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
/* Reserve the frozen strip after the final value. Without this tail room,
   CSS sticky columns are forced out of view at the table's right boundary. */
html body#dpxRoot #ledgerTable th.ledger-col-pred60,
html body#dpxRoot #ledgerTable td.prediction-combined-cell.ledger-col-pred60 {
  width: calc(100vw - 180px) !important;
  min-width: calc(100vw - 180px) !important;
  max-width: calc(100vw - 180px) !important;
  padding-right: calc(100vw - 390px) !important;
  text-align: left !important;
}

@media (max-width: 600px) {
  html body#dpxRoot #ledgerTable .ledger-col-tradeCount {
    width: 66px !important; min-width: 66px !important; max-width: 66px !important;
  }
  html body#dpxRoot #ledgerTable .ledger-col-side {
    width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  }
  html body#dpxRoot #ledgerTable .ledger-col-stake {
    width: 56px !important; min-width: 56px !important; max-width: 56px !important;
  }
  html body#dpxRoot #ledgerTable .sticky-2 { left: 66px !important; }
  html body#dpxRoot #ledgerTable .sticky-3 { left: 110px !important; }
  html body#dpxRoot #ledgerTable th[class*="ledger-col-pred"],
  html body#dpxRoot #ledgerTable td.prediction-combined-cell {
    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;
    font-size: 9.8px !important;
    padding-inline: 5px !important;
  }
  html body#dpxRoot #ledgerTable th.ledger-col-pred60,
  html body#dpxRoot #ledgerTable td.prediction-combined-cell.ledger-col-pred60 {
    width: calc(100vw - 140px) !important;
    min-width: calc(100vw - 140px) !important;
    max-width: calc(100vw - 140px) !important;
    padding-right: calc(100vw - 309px) !important;
  }
}

@media (min-width: 601px) and (max-width: 1100px) and (min-height: 601px) {
  html body#dpxRoot .trade-card .prediction-panel,
  html body#dpxRoot .trade-card #predictions {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 240px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}