/* MatTrade 4.4.21 — UI/UX stability layer
   Purpose: correct chart/footer collisions, preserve a safe dock lane,
   lock navigation geometry, and reduce paint/layout instability. */

:root{
  --mt-dock-safe:118px;
  --mt-chart-footer-bg:color-mix(in srgb,var(--surface-soft) 72%,var(--surface));
}
html{scroll-padding-bottom:var(--mt-dock-safe)}
body{padding-bottom:calc(var(--mt-dock-safe) + env(safe-area-inset-bottom))!important}

/* A fixed dock must have a visual/safe lane. Content can still scroll fully
   into view, but it no longer visually collides with the dock. */
body:after{
  content:"";position:fixed;z-index:84;left:0;right:0;bottom:0;height:104px;
  pointer-events:none;background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--bg) 88%,transparent) 34%,var(--bg) 72%);
}
.app-screen:not(.hero-screen){padding-bottom:calc(76px + var(--mt-dock-safe))!important;scroll-margin-bottom:var(--mt-dock-safe)}
.final-screen{padding-bottom:calc(100px + var(--mt-dock-safe))!important}

/* Navigation geometry is fixed. Only the small orbit around Trade may rotate. */
.bottom-app-nav{
  z-index:90!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;transition:none!important;animation:none!important;
  contain:layout style!important;overflow:visible!important;will-change:auto!important;
}
.bottom-app-nav>a{transition:background-color .14s ease,color .14s ease,box-shadow .14s ease!important}
.bottom-app-nav>a:not(.center-trade-button),
.bottom-app-nav>a:not(.center-trade-button):hover,
.bottom-app-nav>a:not(.center-trade-button):active{transform:none!important}
.center-trade-button,
.center-trade-button:hover,
.center-trade-button:active{
  width:78px!important;height:78px!important;border-radius:27px!important;
  transform:translateY(-14px)!important;transition:box-shadow .16s ease,background .16s ease!important;
  overflow:visible!important;z-index:4!important;
}
.trade-core{animation:none!important;transform:none!important}
.trade-orbit{animation-duration:7s!important}

/* Chart footer is a bounded terminal strip. Labels and values are separate
   grid tracks so a morphing value can never occupy a neighbouring statistic. */
.web-stats.pro-chart-footer,
.platform-parity-terminal .pro-chart-footer{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;align-items:stretch!important;min-height:54px!important;
  padding:0!important;overflow:hidden!important;background:var(--mt-chart-footer-bg)!important;
  border-top:1px solid var(--line)!important;
}
.web-stats.pro-chart-footer>span,
.platform-parity-terminal .pro-chart-footer>span{
  min-width:0!important;display:grid!important;grid-template-rows:auto auto!important;
  align-content:center!important;justify-items:start!important;gap:4px!important;
  padding:8px 10px!important;border-right:1px solid var(--line)!important;
  overflow:hidden!important;white-space:nowrap!important;
}
.web-stats.pro-chart-footer>span:last-child,
.platform-parity-terminal .pro-chart-footer>span:last-child{border-right:0!important}
.web-stats.pro-chart-footer small,
.platform-parity-terminal .pro-chart-footer small{
  display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;
  text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--muted)!important;
  font:700 7px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.01em!important;
}
.web-stats.pro-chart-footer b,
.platform-parity-terminal .pro-chart-footer b{
  display:block!important;margin:0!important;min-width:0!important;max-width:100%!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:left!important;
  font:800 9px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace!important;color:var(--ink)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
.web-stats.pro-chart-footer .mt-morph,
.platform-parity-terminal .pro-chart-footer .mt-morph{
  width:auto!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;
  justify-items:start!important;display:inline-grid!important;flex:none!important;
}
/* Deliberate separation between canvas time scale and statistics strip. */
.platform-parity-terminal .pro-chart-stage{border-bottom:0!important;margin-bottom:0!important}
.platform-parity-terminal .pro-chart-status{overflow-x:auto!important;scrollbar-width:none!important}
.platform-parity-terminal .pro-chart-status::-webkit-scrollbar{display:none}
.platform-parity-terminal .pro-chart-symbol,
.platform-parity-terminal .pro-quote-strip,
.platform-parity-terminal .pro-chart-toolbar{min-width:0!important}

/* Avoid accidental whole-card motion while using the analytical terminal. */
.platform-parity-terminal>.web-watch,
.platform-parity-terminal>.web-ticket,
.platform-parity-terminal>.pro-chart-panel{transform:none!important}

@media(max-width:720px){
  :root{--mt-dock-safe:108px}
  body:after{height:96px}
  .app-screen:not(.hero-screen){padding-bottom:calc(48px + var(--mt-dock-safe))!important}
  .web-trade-screen{padding-bottom:calc(42px + var(--mt-dock-safe))!important}
  .bottom-app-nav{bottom:max(7px,env(safe-area-inset-bottom))!important}
  .center-trade-button,.center-trade-button:hover,.center-trade-button:active{
    width:76px!important;height:76px!important;border-radius:26px!important;transform:translateY(-14px)!important;
  }
  .web-stats.pro-chart-footer,
  .platform-parity-terminal .pro-chart-footer{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:104px!important;
  }
  .web-stats.pro-chart-footer>span,
  .platform-parity-terminal .pro-chart-footer>span{
    min-height:52px!important;padding:8px 10px!important;border-bottom:1px solid var(--line)!important;
  }
  .web-stats.pro-chart-footer>span:nth-child(2n),
  .platform-parity-terminal .pro-chart-footer>span:nth-child(2n){border-right:0!important}
  .web-stats.pro-chart-footer>span:nth-last-child(-n+2),
  .platform-parity-terminal .pro-chart-footer>span:nth-last-child(-n+2){border-bottom:0!important}
  .web-stats.pro-chart-footer small,
  .platform-parity-terminal .pro-chart-footer small{font-size:7px!important}
  .web-stats.pro-chart-footer b,
  .platform-parity-terminal .pro-chart-footer b{font-size:9px!important}
  .platform-parity-terminal .pro-chart-stage{min-height:350px!important}
  .platform-parity-terminal .chart-data-window{max-width:calc(100% - 12px)!important}
}
@media(max-width:430px){
  .center-trade-button,.center-trade-button:hover,.center-trade-button:active{width:74px!important;height:74px!important;border-radius:25px!important}
  .web-stats.pro-chart-footer>span,
  .platform-parity-terminal .pro-chart-footer>span{padding-inline:7px!important}
}

@media(prefers-reduced-motion:reduce){
  .trade-orbit{animation:none!important}
}