/* ============================================================
   THE PHONE'S ACCOUNT ROW (js/mobile-stats.js) - under the top bar on
   every phone screen: Balance, Equity, Free margin, Used margin, Margin
   level, Open P&L, then Bonus and Loan when there is one. 28px, sliding
   sideways. The @media query below is MOBILE_MQ in js/mobile.js - change
   one, change all.
   ============================================================ */

/* Phone-only: nothing of it on the desktop. */
#m-stats { display: none; }

@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {

  /* A fixed 28px out of the app's height (#app is the visible height,
     css/mobile.css): the screen under it gets the rest, the bottom menu
     stays where it was. Order 0 and straight after #top-bar in the page:
     under the top bar, above a margin call banner (0, later in the page)
     and the connection bar (1). The lines above and below it are #app's
     own 1px gap (style.css), as between the top bar and a screen. */
  #m-stats:not([hidden]) {
    display: block; order: 0; flex: 0 0 auto; position: relative;
    height: 28px; box-sizing: border-box; overflow: hidden;
    background: var(--bg-secondary);
  }
  /* The chart's full screen is the chart's (a phone on its side on the
     chart is in it) - and so is a phone on its side on the chart out of
     it: there the chart has ~130px of height, and 28 of them matter. */
  html.m-chart-fs #m-stats,
  body.m-landscape[data-mobile-screen="chart"] #m-stats { display: none !important; }

  /* The row slides sideways under a finger, with momentum, no scroll bar;
     at its ends a swipe stops there - it does not move the page nor, in
     Chrome, turn into Back. */
  .m-stats-track {
    display: flex; align-items: center; height: 100%;
    margin: 0; padding: 0 4px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none; touch-action: pan-x;
    white-space: nowrap;
  }
  .m-stats-track::-webkit-scrollbar { display: none; }

  /* Label and figure side by side; a thin line between two pairs. */
  .m-st {
    flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px;
    height: 16px; padding: 0 10px;
    border-inline-start: 1px solid var(--border-primary);
  }
  .m-st:first-child { border-inline-start: 0; }
  .m-st[hidden] { display: none; }
  .m-st-l {
    margin: 0; font-size: 10px; font-weight: 600; line-height: 16px;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted);
  }
  /* Tabular figures: a price tick changes digits, not widths. */
  .m-st-v {
    margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    line-height: 16px; color: var(--text-primary);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  }
  .m-st-v em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-inline-start: 4px; }
  .m-st-v em:empty { display: none; }
  /* The theme's colours (high contrast included): a balance below zero,
     the P&L, the margin level near a margin call (amber) and at it (red). */
  .m-st.neg .m-st-v, .m-st[data-sign="-"] .m-st-v, .m-st[data-state="danger"] .m-st-v { color: var(--red); }
  .m-st[data-sign="+"] .m-st-v { color: var(--green); }
  .m-st[data-state="warn"] .m-st-v { color: var(--orange); }
  /* Arabic labels: a size that reads, no letter spacing (it breaks the
     joined letters). */
  html[dir="rtl"] .m-st-l { font-size: 11px; letter-spacing: 0; }

  /* More to the side: the edge it is behind fades out. */
  #m-stats.m-more-end .m-stats-track {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  #m-stats.m-more-start .m-stats-track {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
    mask-image: linear-gradient(to right, transparent, #000 28px);
  }
  #m-stats.m-more-start.m-more-end .m-stats-track {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  html[dir="rtl"] #m-stats.m-more-end .m-stats-track {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }
  html[dir="rtl"] #m-stats.m-more-start .m-stats-track {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 28px);
    mask-image: linear-gradient(to left, transparent, #000 28px);
  }
  html[dir="rtl"] #m-stats.m-more-start.m-more-end .m-stats-track {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
}