/* Fades appear only while content remains beyond the visible right edge. */
.table-scroll.z-can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, rgb(var(--z-text)) calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, rgb(var(--z-text)) calc(100% - 24px), transparent);
}

@media (max-width: 850px) {
  .positions-section .section-header {
    min-width: 0;
    flex-wrap: nowrap;
    height: auto;
  }
  .positions-section .section-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .positions-section .section-header > div:first-child::-webkit-scrollbar {
    display: none;
  }
  .positions-section .section-header > div:first-child.z-can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, rgb(var(--z-text)) calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, rgb(var(--z-text)) calc(100% - 26px), transparent);
  }
  .positions-section .table-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 550px) {
  /* Fees and PnL remain available in Manage; keep the four core fields visible. */
  .positions-section .table-scroll > table th:nth-child(4),
  .positions-section .table-scroll > table th:nth-child(5),
  .positions-section .table-scroll > table td:nth-child(4),
  .positions-section .table-scroll > table td:nth-child(5) {
    display: none;
  }
  /* Pool fee, TVL and volume are more useful here than MCap and the empty Bin. */
  .pool-comparison th:nth-child(5),
  .pool-comparison th:nth-child(6),
  .pool-comparison td:nth-child(5),
  .pool-comparison td:nth-child(6) {
    display: none;
  }
  /* Cells stay on one line; columns size to their values and the region scrolls
     (with the fade hint above) when a row is wider than the phone. */
  .positions-section .table-scroll > table,
  .positions-section .pool-comparison {
    width: 100%;
    min-width: 330px;
    table-layout: auto;
    white-space: nowrap;
  }
  .positions-section .table-scroll th,
  .positions-section .table-scroll td,
  .positions-section .pool-comparison td strong {
    padding: 11px 6px;
    font-size: .588235rem;
    line-height: 1.5;
    white-space: nowrap;
  }
  .positions-section .table-scroll th {
    font-size: .588235rem;
    letter-spacing: .1em;
  }
  .positions-section .table-scroll td small {
    font-size: .588235rem;
    line-height: 1.45;
  }
  .positions-section .pool-comparison td strong {
    padding: 0;
    font-weight: 500;
  }
  .positions-section .table-scroll .status {
    display: inline-block;
    padding: 3px 4px;
    font-size: .588235rem;
    line-height: 1.4;
    white-space: nowrap;
  }
  .positions-section .table-scroll td button {
    min-height: 44px;
    padding: 5px 8px;
    font-size: .588235rem;
    line-height: 1.4;
    white-space: nowrap;
  }
  .pool-table-caption { overflow-wrap: anywhere; }
}

/* On-chain position dialog (markup from live-positions.js). */
#live-position-dialog .lp-label {
  display: flex;
  align-items: center;
}
#live-position-dialog .lp-key-hint {
  display: block;
  color: rgb(var(--z-warn));
  font-size: .647059rem;
  line-height: 1.4;
}
#live-position-dialog .lp-warn {
  color: rgb(var(--z-warn));
}
/* Status lines stay in the tree for screen readers but take no space while empty. */
#live-position-dialog p[role="status"]:empty {
  margin: 0;
}
#live-position-dialog .lp-review-actions:not(:has(> :not([hidden]))) {
  display: none;
}