/* VINCI page: USD price chart and LP leaderboard (vinci-market-ui.js) */

/* Chart */
#vchart { margin: 10px 0 30px; }
.vchart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
#vchart-price { font-size: 32px; font-weight: 700; letter-spacing: -.5px; }
.vchart-sub { display: flex; gap: 10px; align-items: baseline; margin: 2px 0 10px; font-size: 92%; }
.vchart-up   { color: #2e7d32; font-weight: 700; }
.vchart-down { color: #c62828; font-weight: 700; }
#vchart-when { opacity: .65; }
#vchart-svg-box { position: relative; height: 220px; user-select: none; touch-action: pan-y; cursor: crosshair; }
.vchart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vchart-svg.is-up   .vchart-line { stroke: #4b5bff; }
.vchart-svg.is-down .vchart-line { stroke: #e0465a; }
.vchart-svg.is-up   .vchart-stop-top { stop-color: #4b5bff; stop-opacity: .28; }
.vchart-svg.is-down .vchart-stop-top { stop-color: #e0465a; stop-opacity: .22; }
.vchart-stop-bottom { stop-color: #4b5bff; stop-opacity: 0; }
.vchart-label { position: absolute; font-size: 12px; opacity: .65; pointer-events: none; }
.vchart-high { top: -6px; left: 0; }
.vchart-low  { bottom: -18px; left: 0; }
.vchart-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--border-primary, #999); pointer-events: none; }
.vchart-dot { position: absolute; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #4b5bff; border: 2px solid var(--back-primary, #fff); }
.vchart-empty { display: flex; align-items: center; justify-content: center; height: 100%; opacity: .6; }
#vchart-tabs { display: flex; justify-content: space-between; gap: 4px; margin-top: 26px; }
#vchart-tabs button { flex: 1; max-width: 70px; padding: 6px 0; border: none; border-radius: 16px; background: transparent; color: inherit; font: inherit; font-size: 90%; cursor: pointer; opacity: .75; }
#vchart-tabs button:hover { opacity: 1; background: var(--back-alternate, #f1f1f1); }
#vchart-tabs button.selected { opacity: 1; font-weight: 700; background: var(--back-alternate, #eee); }
.vchart-source { margin-top: 6px; font-size: 11px; opacity: .5; text-align: right; }

/* Leaderboard */
.vlp-summary { margin: 4px 0 10px; }
.vlp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vlp-table { width: 100%; border-collapse: collapse; font-size: 92%; white-space: nowrap; }
.vlp-table th { text-align: left; font-weight: 600; opacity: .65; padding: 6px 8px; border-bottom: 1px solid var(--border-secondary, #ddd); }
.vlp-table td { padding: 8px; border-bottom: 1px solid var(--border-secondary, #eee); vertical-align: middle; }
.vlp-table .vlp-num { text-align: right; }
.vlp-rank { font-weight: 700; width: 28px; }
.vlp-me td { background: var(--back-alternate, #f5f7ff); }
.vlp-who { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.vlp-who img, .vlp-noavatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--back-alternate, #ddd); flex-shrink: 0; }
.vlp-noavatar { display: inline-block; }
.vlp-mono { font-family: monospace; }
.vlp-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 78%; font-weight: 700; }
.vlp-in   { background: #dcfce7; color: #166534; }
.vlp-out  { background: #fef3c7; color: #92400e; }
.vlp-part { background: #e0e7ff; color: #3730a3; }
.vlp-gold { background: #fdf0c4; color: #8a6400; }
.vlp-you  { background: #00acef; color: #fff; }
.vlp-note { margin-top: 10px; font-size: 85%; opacity: .7; line-height: 1.45; white-space: normal; }

@media screen and (max-width: 600px) {
	#vchart-price { font-size: 26px; }
	#vchart-svg-box { height: 180px; }
}