/* v423 — funding-rate calculator mobile live badge stability.
   Mobile only. Keep the async live status out of the grid flow so loading/live/stale
   transitions never change the height of the funding field or push the next row. */
@media (max-width:760px){
  body.th-page-funding-calculator #calc-funding .field:has(#fc-rate){
    position:relative;
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag{
    position:absolute;
    z-index:2;
    right:7px;
    top:34px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    width:auto;
    max-width:min(112px,52%);
    height:24px;
    margin:0!important;
    padding:0 7px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:8px;
    line-height:1;
    letter-spacing:.035em;
    pointer-events:none;
    background:color-mix(in srgb,var(--void) 92%,transparent);
    border-color:var(--line);
    backdrop-filter:blur(5px);
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag .dot{
    width:6px;
    height:6px;
    flex:0 0 6px;
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag[data-state="live"]{
    color:var(--pulse);
    border-color:color-mix(in srgb,var(--pulse) 36%,var(--line));
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag[data-state="loading"]{
    color:var(--mute);
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag[data-state="stale"]{
    color:var(--mute);
    border-color:var(--line);
  }

  body.th-page-funding-calculator #calc-funding #fc-live-tag[data-state="stale"] .dot{
    box-shadow:none;
    background:var(--mute);
  }

  body.th-page-funding-calculator #calc-funding #fc-rate{
    padding-right:min(120px,54%)!important;
  }
}

@media (max-width:360px){
  body.th-page-funding-calculator #calc-funding #fc-live-tag{
    right:6px;
    max-width:88px;
    padding-inline:6px;
    font-size:7.5px;
  }
  body.th-page-funding-calculator #calc-funding #fc-rate{
    padding-right:94px!important;
  }
}
