[data-sponsor-spacer] { height: var(--sponsored-rail-offset, 73px); }
:root:has([data-sponsored-promotion-rail]):has([data-primary-mobile-navigation]) { --sponsored-rail-dock-height: 64px; }
@media (min-width: 1024px) { :root:has([data-sponsored-promotion-rail]):has([data-primary-mobile-navigation].lg\:hidden) { --sponsored-rail-dock-height: 0px; } }
body:has([data-sponsored-promotion-rail]) [data-primary-mobile-navigation] { bottom: var(--sponsored-rail-height, 73px); }
body:has([data-sponsored-promotion-rail]) [data-support-alert-container] { bottom: calc(var(--sponsored-rail-offset, 73px) + 1rem) !important; }
.sponsor-rail { --sponsor-visible: 1; --sponsor-safe-area: env(safe-area-inset-bottom, 0px); position: fixed; z-index: 40; inset-inline: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: calc(73px + var(--sponsor-safe-area)); padding: 4px 8px calc(4px + var(--sponsor-safe-area)); border-top: 1px solid #d4d4d4; background: #fff; color: #20272b; box-shadow: 0 -2px 10px #20272b12; }
.sponsor-rail * { box-sizing: border-box; letter-spacing: 0; }
.sponsor-viewport { display: flex; flex: 1 1 0; min-width: 0; height: 64px; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overflow-anchor: none; scroll-snap-type: none; scroll-behavior: auto; scrollbar-width: none; }
.sponsor-viewport::-webkit-scrollbar { display: none; }
.sponsor-post { display: flex; flex: 0 0 calc((100% - (var(--sponsor-visible) - 1) * 8px) / var(--sponsor-visible)); min-width: 0; height: 64px; gap: 6px; overflow: hidden; border-radius: 4px; background: #f5f6f6; color: inherit; text-decoration: none; overflow-anchor: none; }
.sponsor-post:hover { background: #eaf2f0; }
.sponsor-post img { flex: 0 0 48px; width: 48px; height: 64px; object-fit: cover; background: #e7eceb; }
.sponsor-post img[src$="encalio-logo.svg"] { object-fit: contain; padding: 5px; }
.sponsor-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 2px 4px 2px 0; }
.sponsor-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 14px; font-weight: 650; }
.sponsor-description { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: #39464b; font-size: 11px; line-height: 13px; }
.sponsor-details { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sponsor-badge { flex-shrink: 0; color: #754c16; font-size: 10px; line-height: 12px; font-weight: 600; }
.sponsor-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #535c60; font-size: 10px; line-height: 12px; }
.sponsor-tools { flex: 0 0 60px; display: flex; flex-direction: column; justify-content: center; height: 64px; border-left: 1px solid #e0e5e4; padding-left: 4px; }
.sponsor-tools button { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 3px; background: #fff; color: #245f5a; cursor: pointer; }
.sponsor-tools button:hover { background: #eaf2f0; }
.sponsor-tools button svg, .sponsor-tools button i { width: 15px; height: 15px; display: block; }
.sponsor-location { flex-direction: column; gap: 1px; width: 55px; min-height: 34px; font-size: 10px; line-height: 12px; }
.sponsor-playback { display: flex; height: 30px; }
.sponsor-playback button { width: 27px; height: 30px; }
.sponsor-rail [hidden] { display: none !important; }
.sponsor-empty { align-self: center; padding: 8px; color: #245f5a; font-size: 12px; text-decoration: underline; }
.sponsor-rail :focus-visible { outline: 2px solid #174e4b; outline-offset: -2px; }
body:has(dialog[open]) .sponsor-rail, .sponsor-rail[data-editing] { visibility: hidden; }
@media (min-width: 600px) { .sponsor-post img { flex-basis: 64px; width: 64px; } }
@media (min-width: 768px) { .sponsor-rail { --sponsor-visible: 2; } }
@media (min-width: 1100px) { .sponsor-rail { --sponsor-visible: 3; } }
@media (min-width: 1440px) { .sponsor-rail { --sponsor-visible: 4; } }
@media (min-width: 1800px) { .sponsor-rail { --sponsor-visible: 5; } }
@media (min-width: 2160px) { .sponsor-rail { --sponsor-visible: 6; } }
@media (forced-colors: active) { .sponsor-post, .sponsor-tools button { border: 1px solid ButtonText; } }