/* Measurements are in the supplied 589px reference's coordinate system.
   Container units keep plates and live numeric glyphs on one common scale. */
html { scrollbar-width: none; }
@font-face {
  font-family: 'Account Amount';
  src: url('/assets/fidelity/DINish-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
html::-webkit-scrollbar { display: none; }
.app-shell { container-type: inline-size; --u: calc(min(100vw, 470px) / 589); }
#trade.screen > :not(.trade-replica) { display: none !important; }
#trade.screen > .trade-replica { display: block !important; }
.trade-replica { --u: calc(100cqw / 589); color: #252728; background: #f5f6fa; }
.replica-header { display: block; width: 100%; height: auto; aspect-ratio: 589 / 317; object-fit: fill; }
.replica-header {
  background-image: url('/assets/fidelity/header-background.png');
  background-repeat: no-repeat;
  background-size: 100% min(63.941px, 13.605vw);
  background-color: #f5f7fc;
  background-position: center top;
}
.replica-assets .replica-plate { aspect-ratio: 553 / 351; object-fit: fill; }
.replica-gain .replica-plate { aspect-ratio: 553 / 213; object-fit: fill; }
.replica-assets, .replica-gain {
  position: relative;
  margin: 0 calc(18 * var(--u));
  line-height: 1;
}
.replica-plate { display: block; width: 100%; height: auto; }
.r-number {
  display: inline-block;
  width: auto;
  flex-shrink: 0;
  height: auto;
  font-size: calc(26 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.r-number, #analysis [data-key], #analysis .return-rate p b,
#analysis .month b, .replica-tiles i {
  font-family: 'Account Amount', 'Arial Narrow', sans-serif;
  font-weight: 550;
  font-variation-settings: 'wdth' 110;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .006em;
}
.replica-assets > .r-number { position: absolute; }
.r-total { left: 3.25%; top: 18.75%; font-size: calc(45 * var(--u)); }
/* All account values use native font outlines; total keeps its approved metrics. */
.r-total.r-total-text {
  top: calc(18.75% - 4.2 * var(--u));
  display: block;
  width: auto;
  height: auto;
  font-family: 'Account Amount', 'Arial Narrow', sans-serif;
  font-size: calc(37.5 * var(--u));
  font-weight: 550;
  font-variation-settings: 'wdth' 110;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .006em;
  line-height: 1;
}
.r-debt, .r-cash, .r-concentration { left: 3.25%; }
.r-guarantee, .r-usable, .r-ratio { left: 34%; }
.r-daily, .r-withdraw { left: 64.9%; }
.r-debt, .r-guarantee, .r-daily { top: calc(45.6% - 1.5 * var(--u)); }
.r-cash, .r-usable, .r-withdraw { top: calc(65.8% - 1.5 * var(--u)); }
.r-concentration, .r-ratio { top: calc(86.3% - 1.5 * var(--u)); }
.replica-transfer { position: absolute; left: 65%; top: 77%; width: 27%; height: 14%; }
.replica-gain { margin-top: calc(14 * var(--u)); }
.replica-cutoff { position: absolute; left: 21.7%; top: 12.8%; font: 400 calc(20 * var(--u)) / 1.2 'PingFang SC', sans-serif; color: #a0a3a5; white-space: nowrap; }
.replica-income { position: absolute; left: 3.25%; top: calc(30.5% - 1.5 * var(--u)); display: flex; align-items: baseline; }
.replica-income .r-number { font-size: calc(33 * var(--u)); }
.income-unit { flex: none; font: 500 calc(18 * var(--u)) / 1 'PingFang SC', sans-serif; }
.replica-comparison {
  position: absolute;
  left: 39%; top: 35%;
  display: flex; align-items: center;
  color: #89653e;
  font: 400 calc(18 * var(--u)) / 1 'PingFang SC', sans-serif;
  white-space: nowrap;
}
.replica-comparison .r-number { font-size: calc(22 * var(--u)); margin-top: calc(-1 * var(--u)); margin-left: calc(3 * var(--u)); }
.replica-chart { position: absolute; left: 3.6%; top: 67%; width: 77.6%; height: 25%; }
.chart-account, .chart-benchmark { position: absolute; left: 83.2%; font-size: calc(23 * var(--u)); }
.chart-account { top: 63.5%; color: #d9953d; }
.chart-benchmark { top: 84%; color: #187ec6; }
.replica-report-link { position: absolute; inset: 0; width: 100%; height: 100%; }
.replica-tiles {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: calc(15 * var(--u)) calc(18 * var(--u)) 0;
  padding: calc(19 * var(--u)); gap: calc(18 * var(--u));
  background: white; border-radius: calc(14 * var(--u));
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.replica-tiles > button {
  height: calc(92 * var(--u)); padding: calc(18 * var(--u));
  border-radius: calc(5 * var(--u)); background: #f8f8f8; text-align: left;
}
.replica-tiles b { display: block; font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.replica-tiles button > span { display: flex; justify-content: space-between; font-size: calc(20 * var(--u)); color: #93999d; margin-top: calc(8 * var(--u)); }
.replica-tiles i { color: #d79143; font-style: normal; }

/* Crop only the icon-and-label row. The OS safe area is added exactly once. */
:root {
  --main-tab-visual-height: min(51.446px, 10.946vw);
  --analysis-tab-visual-height: min(73.495px, 15.637vw);
  --app-bottom-inset: env(safe-area-inset-bottom, 0px);
}
.live-tabbar, .analysis-livebar { padding-bottom: var(--app-bottom-inset); }
.live-tabbar { height: calc(var(--main-tab-visual-height) + var(--app-bottom-inset)); }
.analysis-livebar { height: calc(var(--analysis-tab-visual-height) + var(--app-bottom-inset)); }
.live-tabbar::before { background-image: url('/assets/fidelity/trade-tabs.png'); background-position: center top; }
.live-tabbar[data-screen='watch']::before { background-image: url('/assets/fidelity/watch-tabs.png'); }
.analysis-livebar::before { background-image: url('/assets/fidelity/analysis-tabs.png'); background-position: center top; }
#trade.screen, #watch.screen { padding-bottom: calc(var(--main-tab-visual-height) + var(--app-bottom-inset) + 14px); }
#analysis.screen { padding-bottom: calc(var(--analysis-tab-visual-height) + var(--app-bottom-inset) + 14px); }
html.standalone-preview-mode:not(.standalone-mode) { --app-bottom-inset: 34px; }
html.standalone-preview-mode:not(.standalone-mode) .pixel-capture { padding-top: 0; }
#watch .quote { min-height: calc(77 * var(--u)); grid-template-columns: 36% 19% 22.5% 22.5%; }
#watch .quote span b { font-size: calc(27 * var(--u)); font-weight: 400; }
#watch .quote small { font-size: calc(20 * var(--u)); }
#analysis [data-key] { white-space: nowrap; }
#analysis .report-summary > strong[data-key] {
  display: block; font-size: calc(54 * var(--u)); line-height: calc(60 * var(--u));
  padding-top: calc(10px - 3 * var(--u)); padding-bottom: calc(26px + 3 * var(--u));
}
#analysis .report-stats [data-key] {
  display: inline-block; font-size: calc(31.5 * var(--u)); line-height: calc(35 * var(--u));
  position: relative; top: calc(-2.5 * var(--u));
}
#analysis .report-stats { padding-bottom: 27.5px; }
#analysis .return-rate [data-key] { font-size: calc(28 * var(--u)); line-height: calc(31 * var(--u)); }
#analysis .report-stats label { font-size: calc(20 * var(--u)); }
#analysis .return-rate h2 { font-size: calc(26 * var(--u)); }
#analysis .return-rate p { font-size: calc(20 * var(--u)); white-space: nowrap; }
#analysis .month { display: block; position: relative; text-align: left; }
#analysis .month b { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); }
#analysis .pixel-frame .back-hit { display: block !important; top: 0; left: 0; width: 18%; height: 42%; }

/* The document is not the scroller. iOS must never extend moving content
   underneath its native status-bar edge. This is a real opaque DOM band,
   not a backdrop filter or a pseudo-element that WebKit can ignore. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.pixel-capture { height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none; scrollbar-width: none; }
.pixel-capture::-webkit-scrollbar { display: none; }
.status-edge-guard { display: none; pointer-events: none; }
html.standalone-mode { --status-edge-height: calc(env(safe-area-inset-top, 0px) + 16px); }
html.standalone-preview-mode:not(.standalone-mode) {
  --preview-native-status-height: min(66.231px, 14.092vw);
  --status-edge-height: calc(var(--preview-native-status-height) + 16px);
}
html:is(.standalone-mode, .standalone-preview-mode) .pixel-capture { padding-top: 0; height: calc(100dvh - var(--status-edge-height)); margin-top: var(--status-edge-height); }
/* One opaque, fixed image plane spans the protected edge AND account row.
   The scrollport remains below the protected edge, so text cannot enter it.
   No second background-position calculation can drift when content scrolls. */
html:is(.standalone-mode, .standalone-preview-mode) .status-edge-guard {
  display: block; position: fixed; inset: 0 0 auto;
  height: calc(var(--status-edge-height) + min(63.941px, 13.605vw));
  z-index: 0; background-color: #f5f7fc;
}
/* Keep the guard itself fully opaque. Only fade the existing artwork, so
   its top edge matches the native default status bar without a hard seam.
   The browser preview reserves a flat region for that OS-owned status bar. */
html:is(.standalone-mode, .standalone-preview-mode) .status-edge-guard::before {
  content: ''; position: absolute;
  inset: var(--preview-native-status-height, 0px) 0 0;
  background-image: url('/assets/fidelity/header-background.png');
  background-repeat: no-repeat; background-position: center top;
  background-size: min(100vw, 470px) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 4px, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0px, transparent 4px, #000 40px);
}
html:is(.standalone-mode, .standalone-preview-mode) .pixel-capture { z-index: 1; background: transparent; box-shadow: none; }
html:is(.standalone-mode, .standalone-preview-mode) #trade.screen,
html:is(.standalone-mode, .standalone-preview-mode) .trade-replica,
html:is(.standalone-mode, .standalone-preview-mode) .replica-header { background: transparent; }