/* All watchlist copy and financial values are live vector text, not masks.
   Match the supplied 1279px artwork coordinates without scaling text layers. */
@font-face {
  font-family: 'Watch Numbers';
  src: url('/assets/fidelity/RobotoCondensed.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Watch Quotes';
  src: url('/assets/fidelity/Roboto.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
#watch { --watch-unit: calc(100cqw / 1279); --watch-red: #dc383d; background: transparent; font-family: 'PingFang SC', -apple-system, 'Microsoft YaHei', sans-serif; }
#watch > .watch-hd-header { display: block !important; }
.watch-hd-header { position: relative; width: 100%; aspect-ratio: 1279 / 615; color: #202526; }
.watch-hd-header::before { content: ''; position: absolute; inset: 26.34% 0 0; background: white; border-radius: calc(28 * var(--watch-unit)) calc(28 * var(--watch-unit)) 0 0; }
.watch-search-area { position: absolute; inset: 0 0 auto; height: 26.34%; }
.watch-search-field { position: absolute; left: 4.69%; top: 32.1%; width: 81.47%; height: 54.94%; display: flex; align-items: center; border: 1px solid #dfe2e4; border-radius: 999px; background: #fff; }
.watch-search-field img { width: 6.34%; height: auto; margin-left: 3.4%; flex: none; }
.watch-search-field input { min-width: 0; width: 85%; padding: 0 0 0 calc(12 * var(--watch-unit)); border: 0; outline: none; border-radius: inherit; background: transparent; font: 400 calc(43 * var(--watch-unit)) / 1.4 'PingFang SC', sans-serif; color: #232729; }
.watch-search-field input::placeholder { color: #7b8083; opacity: 1; }
.watch-search-field input:focus { font-size: max(16px, calc(43 * var(--watch-unit))); }
.watch-search-field:focus-within { border-color: #a8b6c7; }
.watch-settings { position: absolute; left: 90.7%; top: 32.1%; width: 6.57%; height: auto; }
.watch-market-indices { position: absolute; top: 30.6%; left: 3.75%; width: 75%; display: grid; grid-template-columns: repeat(3, 1fr); }
.watch-market-indices > div { display: flex; flex-direction: column; align-items: flex-start; }
.watch-market-indices > div > span { font-size: calc(41 * var(--watch-unit)); line-height: 1.25; white-space: nowrap; }
.watch-market-indices b { font: 500 calc(59 * var(--watch-unit)) / 1.18 'Watch Numbers', sans-serif; color: var(--watch-red); font-variant-numeric: tabular-nums; }
.watch-market-indices small { display: flex; gap: calc(14 * var(--watch-unit)); font: 500 calc(37 * var(--watch-unit)) / 1.2 'Watch Numbers', sans-serif; color: var(--watch-red); white-space: nowrap; }
.watch-market-link { position: absolute; top: 33%; width: 9%; text-align: center; font-size: calc(43 * var(--watch-unit)); line-height: 1.25; }
.watch-market-link img { display: block; height: calc(78 * var(--watch-unit)); width: auto; margin: 0 auto calc(12 * var(--watch-unit)); }
.watch-market-link img { margin-bottom: 0; }
.watch-funds { left: 78%; } .watch-news { left: 89%; }
.watch-section-tabs { position: absolute; top: 60.98%; left: 2.8%; right: 2.8%; height: 22.44%; border-top: 1px solid #eee; display: flex; align-items: flex-start; gap: calc(95 * var(--watch-unit)); padding-top: calc(34 * var(--watch-unit)); white-space: nowrap; font-size: calc(48 * var(--watch-unit)); line-height: 1.3; }
.watch-section-tabs b { position: relative; font-weight: 600; }
.watch-section-tabs b::after { content: ''; position: absolute; width: 27%; height: calc(9 * var(--watch-unit)); background: #202526; left: 36%; bottom: calc(-21 * var(--watch-unit)); }
.watch-section-tabs img { position: absolute; right: 0; top: calc(34 * var(--watch-unit)); width: calc(78 * var(--watch-unit)); height: auto; }
.watch-section-tabs { padding-top: calc(24 * var(--watch-unit)); }
.watch-column-labels { position: absolute; top: 82.7%; left: 2.8%; right: 3.2%; height: 17.3%; display: grid; grid-template-columns: 36% 19% 22.5% 22.5%; align-items: center; color: #8c9397; font-size: calc(45 * var(--watch-unit)); line-height: 1; }
.watch-column-labels > span { display: flex; align-items: center; }
.watch-column-labels button { text-align: right; white-space: nowrap; }
.watch-column-labels button img { width: calc(21 * var(--watch-unit)); margin-left: calc(14 * var(--watch-unit)); vertical-align: middle; }
.watch-column-labels .sorted { color: #343b40; }
.watch-column-labels { top: 79.7%; }
.watch-filter-icon { width: calc(52 * var(--watch-unit)); height: auto; margin-right: calc(8 * var(--watch-unit)); }
#watch > .quotes { padding: 0 calc(40 * var(--watch-unit)) 0 calc(36 * var(--watch-unit)); }
#watch .quote { display: grid; grid-template-columns: 36% 19% 22.5% 22.5%; height: calc(167 * var(--watch-unit)); min-height: 0; align-items: center; }
#watch .quote { padding-bottom: calc(44 * var(--watch-unit)); }
#watch .quote span b { font-size: calc(55 * var(--watch-unit)); font-weight: 400; line-height: 1.2; white-space: nowrap; }
#watch .quote small { display: flex; align-items: center; gap: calc(8 * var(--watch-unit)); margin-top: calc(10 * var(--watch-unit)); font: 400 calc(42 * var(--watch-unit)) / 1 -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; color: #858d91; }
#watch .quote small i { display: inline-flex; width: calc(33 * var(--watch-unit)); height: calc(35 * var(--watch-unit)); margin: 0; align-items: center; justify-content: center; font: 400 calc(28 * var(--watch-unit)) / 1 'PingFang SC', sans-serif; border: 1px solid #cfb989; color: #b79965; }
#watch .quote small i:nth-of-type(n+2) { color: #699bb3; border-color: #a7c3d1; }
#watch .quote strong { font: 450 calc(58 * var(--watch-unit)) / 1 'Watch Quotes', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--watch-red); white-space: nowrap; }
#watch > #watch-empty:not([hidden]) { display: block !important; margin: 30px 14px; text-align: center; color: #858d91; }

/* The watch header is outside its scrollport. Only quotes may move;
   search/indices cannot disappear behind the native status-edge guard. */
.pixel-capture[data-screen='watch'] { overflow-y: hidden; }
#watch.screen.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: calc(var(--main-tab-visual-height) + var(--app-bottom-inset));
}
#watch > .watch-hd-header { flex: 0 0 auto; }
#watch > .quotes {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
#watch > .quotes::-webkit-scrollbar { display: none; }
#watch > #watch-empty:not([hidden]) { flex: 0 0 auto; }