.site-sticky-shell {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background: #007bff;
    box-shadow: 0 5px 16px rgba(2, 18, 38, .2);
}

.site-sticky-shell .header-container-fluid {
    position: relative;
    z-index: 2;
}

.commodity-ticker {
    --ticker-bg: #081a30;
    --ticker-border: rgba(105, 211, 255, .32);
    --ticker-text: #eef7ff;
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid var(--ticker-border);
    border-bottom: 1px solid var(--ticker-border);
    background: var(--ticker-bg);
    color: var(--ticker-text);
    font-size: .82rem;
    line-height: 1;
}

.commodity-ticker__selector,
.commodity-ticker__source {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 .8rem;
    background: #0d2947;
    white-space: nowrap;
}

.commodity-ticker__selector {
    gap: .4rem;
    color: #ffd54a;
    font-weight: 800;
    letter-spacing: .02em;
}

.commodity-ticker__selector span { color: #27d3a2; }
.commodity-ticker__selector select {
    max-width: 15rem;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.commodity-ticker__selector select:focus-visible {
    outline: 2px solid #6ee7ff;
    outline-offset: 2px;
}
.commodity-ticker__selector option { color: #102443; background: #fff; }
.commodity-ticker__source { color: #9eb4c9; font-size: .7rem; }
.commodity-ticker__viewport { min-width: 0; flex: 1 1 auto; overflow: hidden; }

.commodity-ticker__track {
    display: flex;
    width: max-content;
    animation: commodity-ticker-scroll 38s linear infinite;
}
.commodity-ticker__track.is-hidden { display: none; }

.commodity-ticker__viewport:hover .commodity-ticker__track { animation-play-state: paused; }

.commodity-ticker__group { display: flex; flex: 0 0 auto; align-items: center; }
.commodity-ticker__quote { display: inline-flex; align-items: baseline; gap: .38rem; padding: 0 1.15rem; white-space: nowrap; }
.commodity-ticker__quote--link { color: inherit; text-decoration: none; }
.commodity-ticker__quote--link:hover,
.commodity-ticker__quote--link:focus-visible { color: inherit; text-decoration: none; }
.commodity-ticker__quote[data-market-tooltip] { cursor: help; }
.commodity-ticker__quote--link[data-market-tooltip] { cursor: pointer; }
.commodity-ticker__quote[data-market-tooltip]:focus-visible {
    border-radius: 4px;
    outline: 2px solid #6ee7ff;
    outline-offset: -2px;
}
.commodity-ticker__quote::after { content: "•"; margin-left: 1rem; color: #496784; }
.commodity-ticker__quote strong { color: #fff; font-weight: 700; }
.commodity-ticker__change { font-weight: 700; }
.commodity-ticker__change--up { color: #35d9a1; }
.commodity-ticker__change--down { color: #ff7388; }
.commodity-ticker__change--flat { color: #b9c8d8; }

.market-ticker-tooltip {
    position: fixed;
    z-index: 2200;
    max-width: min(320px, calc(100vw - 24px));
    padding: .65rem .75rem;
    border: 1px solid rgba(110, 231, 255, .45);
    border-radius: 8px;
    background: #07182b;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
    color: #f3f8ff;
    font-size: .78rem;
    line-height: 1.45;
    pointer-events: none;
}
.market-ticker-tooltip[hidden] { display: none; }

html[data-ainvestor-theme="day"] .commodity-ticker {
    --ticker-bg: #edf5fc;
    --ticker-border: #bfd2e3;
    --ticker-text: #18324d;
}
html[data-ainvestor-theme="day"] .site-sticky-shell {
    box-shadow: 0 5px 15px rgba(29, 58, 87, .16);
}
html[data-ainvestor-theme="day"] .commodity-ticker__selector,
html[data-ainvestor-theme="day"] .commodity-ticker__source { background: #dcebf7; }
html[data-ainvestor-theme="day"] .commodity-ticker__selector { color: #765a00; }
html[data-ainvestor-theme="day"] .commodity-ticker__quote strong { color: #102b46; }
html[data-ainvestor-theme="day"] .commodity-ticker__change--up { color: #087c59; }
html[data-ainvestor-theme="day"] .commodity-ticker__change--down { color: #b3243a; }

@keyframes commodity-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 680px) {
    .commodity-ticker__source { display: none; }
    .commodity-ticker__selector { padding: 0 .55rem; font-size: .72rem; }
    .commodity-ticker__selector select { max-width: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .commodity-ticker__track { animation: none; }
    .commodity-ticker__viewport { overflow-x: auto; scrollbar-width: thin; }
    .commodity-ticker__group[aria-hidden="true"] { display: none; }
}
