/* Six visible instruments on desktop; five compact cards on common phones. */
.reference-prices{position:relative;margin:-2px 0 10px;padding:4px 32px 4px 5px;border:1px solid #cfdae4;border-radius:10px;background:linear-gradient(110deg,#edf6f3 0%,#f4f7fc 55%,#eff2fb 100%);min-width:0;isolation:isolate}
.reference-viewport{container-type:inline-size;overflow:hidden;min-width:0;border-radius:6px;touch-action:pan-y pinch-zoom;outline-offset:3px}
.reference-track{display:flex;width:max-content;will-change:transform;animation:vm-market-tape var(--quote-duration,60s) linear infinite;animation-delay:var(--quote-phase,.3s)}
.reference-quote-grid{display:flex;gap:6px;padding-right:6px;flex:none;min-width:0}
.reference-quote{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:2px 4px;flex:0 0 calc((100cqw - 30px)/6);width:calc((100cqw - 30px)/6);min-width:0;padding:5px 7px;border:1px solid #dce5ec;border-radius:6px;background:#ffffffdb;overflow:hidden}
.reference-symbol{display:inline-flex;align-items:center;gap:2px;grid-column:1;grid-row:1;font-size:9px;line-height:1.25;font-weight:800;letter-spacing:.1px;color:#43556a;white-space:nowrap}
.reference-quote-xau .reference-symbol{color:#a16b17}
.reference-quote-btc .reference-symbol{color:#b45e1b}
.reference-quote strong{grid-column:1/-1;grid-row:2;max-width:100%;font-size:14px;line-height:1.25;font-variant-numeric:tabular-nums;color:#18324a;white-space:nowrap;letter-spacing:-.25px}
.reference-movement{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-self:end;gap:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.reference-trend{display:inline-block;font-size:7px;line-height:1;flex:none}
.reference-change{font-size:9px;line-height:1.25;font-weight:650;white-space:nowrap}
.reference-change-up{color:#177344}
.reference-change-down{color:#b32f45}
.reference-change-flat,.reference-change-missing{color:var(--muted)}
.reference-cache{font-size:7px;font-style:italic;font-weight:500;color:var(--muted)}
.reference-quote.is-stale strong,.reference-quote.is-stale .reference-movement{opacity:.65}
.reference-pause,.reference-quote-info summary{display:grid;place-items:center;width:22px;height:20px;border:1px solid #ccd8e3;border-radius:5px;color:#40576e;background:#ffffffb8;cursor:pointer;font-size:10px;font-weight:700;font-family:inherit;line-height:1;touch-action:manipulation}
.reference-pause{position:absolute;right:5px;top:3px;padding:0}
.reference-quote-info{position:absolute;right:5px;bottom:3px;font-size:11px;z-index:5}
.reference-quote-info summary{list-style:none}
.reference-quote-info summary::-webkit-details-marker{display:none}
.reference-pause:focus-visible,.reference-quote-info summary:focus-visible,.reference-viewport:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.reference-quote-info p{position:absolute;right:-2px;top:20px;width:330px;max-width:calc(100vw - 40px);margin:6px 0 0;padding:12px;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px #0002;background:var(--panel);color:var(--muted);line-height:1.65;font-weight:400}
.reference-quote-info a{color:var(--accent);text-decoration:underline}
.reference-prices.is-paused .reference-track,.reference-prices.is-held .reference-track,.reference-prices:has(.reference-quote-info[open]) .reference-track{animation-play-state:paused}
@media(hover:hover){.reference-prices:hover .reference-track{animation-play-state:paused}}
html[data-theme="dark"] .reference-prices{border-color:#253f53;background:linear-gradient(110deg,#0d282b,#0d1c2b 55%,#192039)}
html[data-theme="dark"] .reference-quote{border-color:#294357;background:#13273be6}
html[data-theme="dark"] .reference-symbol{color:#adbed0}
html[data-theme="dark"] .reference-quote strong{color:#f0f7ff}
html[data-theme="dark"] .reference-quote-xau .reference-symbol{color:#edc778}
html[data-theme="dark"] .reference-quote-btc .reference-symbol{color:#ffb072}
html[data-theme="dark"] .reference-change-up{color:#66e0b2}
html[data-theme="dark"] .reference-change-down{color:#ff8ba1}
html[data-theme="dark"] .reference-pause,html[data-theme="dark"] .reference-quote-info summary{border-color:#304a63;background:#172e42;color:#b5c9de}
@keyframes vm-market-tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:651px) and (max-width:1100px){.reference-quote{flex-basis:calc((100cqw - 24px)/5);width:calc((100cqw - 24px)/5)}}
@media(max-width:650px){
 .reference-prices{padding:3px 31px 3px 4px;margin:0 0 8px;border-radius:8px}
 .reference-quote-grid{gap:4px;padding-right:4px}
 .reference-quote{flex-basis:calc((100cqw - 16px)/5);width:calc((100cqw - 16px)/5);grid-template-columns:minmax(0,1fr);padding:3px 4px;gap:1px;border-radius:5px}
 .reference-movement{grid-column:1;grid-row:1}
 .reference-symbol{grid-column:1;grid-row:2;font-size:8px;letter-spacing:0}
 .reference-quote strong{grid-column:1;grid-row:3;font-size:11.5px;letter-spacing:-.35px}
 .reference-change{font-size:8px}
 .reference-trend{font-size:6px}
 .reference-cache{font-size:6px}
 .reference-pause{right:4px;top:4px}
 .reference-quote-info{right:4px;bottom:4px}
}
@media(max-width:389px){.reference-quote strong{font-size:10.5px}.reference-symbol{font-size:7.5px}.reference-change{font-size:7.5px}}
@media(max-width:359px){.reference-quote{flex-basis:calc((100cqw - 12px)/4);width:calc((100cqw - 12px)/4)}}
/* Bitcoin's longer USD quote needs room for every digit in five-card phone mode. */
@media(min-width:360px) and (max-width:430px){.reference-quote-btc strong{font-size:9.5px;letter-spacing:-.45px}}

@media(min-width:360px) and (max-width:374px){.reference-quote-btc strong{font-size:8.5px}}

/* Explicit product setting: this price tape runs automatically; pause is always available. */
#marketPrices .reference-track{animation:vm-market-tape var(--quote-duration,60s) linear infinite!important;animation-delay:var(--quote-phase,.3s)!important}
#marketPrices.is-paused .reference-track,#marketPrices.is-held .reference-track,#marketPrices:has(.reference-quote-info[open]) .reference-track{animation-play-state:paused!important}
@media(hover:hover){#marketPrices:hover .reference-track{animation-play-state:paused!important}}
/* A compact stock-board surface, independent of the page's light/dark setting. */
#marketPrices{border-color:#245366;background:linear-gradient(90deg,#64e2bc09 1px,transparent 1px),linear-gradient(#64e2bc08 1px,transparent 1px),radial-gradient(ellipse at 12% 0%,#134746aa,transparent 65%),linear-gradient(110deg,#081e2b,#0d2239 65%,#0c2834);background-size:20px 20px,20px 20px,100% 100%,100% 100%;box-shadow:inset 0 1px 0 #cbf7ff0c,0 3px 12px #0b344312}
#marketPrices .reference-quote{border-color:#2a596466;background:#0b2439c7;box-shadow:inset 0 1px 0 #e2faff08}
#marketPrices .reference-symbol{color:#a7c7d5}
#marketPrices .reference-quote strong{color:#f0fbff}
#marketPrices .reference-quote-xau .reference-symbol{color:#f4c46c}
#marketPrices .reference-quote-btc .reference-symbol{color:#ffb06d}
#marketPrices .reference-change-up{color:#62e8ae}
#marketPrices .reference-change-down{color:#ff8a9d}
#marketPrices .reference-change-flat,#marketPrices .reference-change-missing,#marketPrices .reference-cache{color:#9ab6c6}
#marketPrices .reference-pause,#marketPrices .reference-quote-info summary{border-color:#3a6276;background:#153448;color:#c7e7ef}
/* Drag-friendly quote tape: symbol, full price and daily change share one row. */
#marketPrices .reference-viewport{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom}
#marketPrices.is-dragging .reference-viewport{cursor:grabbing}
#marketPrices .reference-quote{display:flex;flex:0 0 auto;width:240px;min-width:max-content;align-items:center;justify-content:center;gap:10px;padding:4px 9px}
#marketPrices .reference-mainline{display:flex;align-items:baseline;gap:7px;flex:none;min-width:0;white-space:nowrap}
#marketPrices .reference-mainline .reference-symbol{flex:none;align-items:baseline;font-size:11px;line-height:1.25}
#marketPrices .reference-mainline strong{flex:none;font-size:14px;line-height:1.25}
#marketPrices .reference-movement{flex:none;margin-left:0;align-items:baseline;gap:3px}
#marketPrices .reference-change{font-size:11px;line-height:1.25}
#marketPrices .reference-cache{position:static;margin-left:2px;font-size:7px}
#marketPrices .reference-direction-up .reference-symbol{color:#62e8ae}
#marketPrices .reference-direction-down .reference-symbol{color:#ff8a9d}
#marketPrices .reference-direction-flat .reference-symbol,#marketPrices .reference-direction-missing .reference-symbol{color:#9ab6c6}
#marketPrices{padding-right:59px}
#marketPrices .reference-pause{right:32px;top:50%;transform:translateY(-50%)}
#marketPrices .reference-quote-info{right:5px;top:50%;bottom:auto;transform:translateY(-50%)}
@media(max-width:650px){
 #marketPrices .reference-quote{width:224px;padding:4px 8px;gap:8px}
 #marketPrices .reference-mainline{gap:6px}
 #marketPrices .reference-mainline .reference-symbol{font-size:10px}
 #marketPrices .reference-mainline strong{font-size:13px;letter-spacing:-.25px}
 #marketPrices .reference-change{font-size:10px}
}

/* MrSL keeps its existing ticker position and shared font/theme tokens. */
html[data-theme] .ticker.mrsl-market-ticker{overflow:visible;border:0;background:transparent;padding:8px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));font-family:var(--body);font-size:14px;color:var(--fg)}
.ticker.mrsl-market-ticker>#marketPrices{max-width:1148px;margin:0 auto;--panel:var(--card);--accent:var(--red);--accent2:var(--red-2);font-family:var(--body)}
/* Source links remain readable on the dark popup surface. */
html[data-theme="dark"] .ticker.mrsl-market-ticker>#marketPrices{--accent:#8bc8f7}
/* Prevent the site's FAQ details/summary styles from covering price controls. */
html[data-theme] .ticker.mrsl-market-ticker{position:relative;z-index:6}
#marketPrices .reference-quote-info{padding:0;border:0}
#marketPrices .reference-quote-info summary{gap:0}
#marketPrices .reference-quote-info summary::after{content:none}
