/* The live curve board (js/curve-board.js): logos on the launch curve, aggro trade style tags, a plain list. */
.cb { position: relative; }
.cb-plot { position: relative; height: 440px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); overflow: clip; }
.cb[data-size="page"] .cb-plot { height: min(68vh, 640px); min-height: 420px; }
.cb-svg { position: absolute; inset: 24px 24px 40px; width: calc(100% - 48px); height: calc(100% - 64px); overflow: visible; }
.cb-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb-area { fill: rgba(61, 91, 255, .10); }
.cb-line { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cb-ticks { position: absolute; inset: auto 24px 12px; height: 16px; }
.cb-tick { position: absolute; transform: translateX(-50%); font: 500 12px/16px var(--mono); color: var(--text-3); white-space: nowrap; }
.cb-tick:first-child { transform: none; }
.cb-tick.end { transform: translateX(-100%); color: var(--accent); }
.cb-beads, .cb-tags { position: absolute; inset: 24px 24px 40px; }
.cb-tags { pointer-events: none; }
.cb-axis { margin: 8px 0 0; font: 500 12px/16px var(--mono); color: var(--text-3); }
.cb-status { margin: 4px 0 0; font: 500 12px/16px var(--mono); color: var(--text-2); }

.cb-bead { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: block; text-decoration: none;
  transition: left var(--slow) var(--ease), top var(--slow) var(--ease), opacity var(--quick) var(--ease), transform var(--quick) var(--ease); }
.cb[data-size="page"] .cb-bead { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.cb-bead.entering { opacity: 0; transform: scale(.6); }
.cb-bead:hover { transform: scale(1.18); z-index: 999 !important; }
.cb-logo { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--panel-4); box-shadow: 0 0 0 1.5px var(--panel-4), 0 0 0 3px var(--bg); }
.cb-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--quick) var(--ease); }
.cb-logo.has-img img { opacity: 1; }
.cb-glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 var(--sans); color: var(--text-2); }
.cb-bead.tone-live .cb-logo { box-shadow: 0 0 0 1.5px var(--up), 0 0 0 3px var(--bg); }
.cb-bead.tone-near .cb-logo { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 3px var(--bg); }
.cb-bead.fresh::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--up); animation: cb-ping 1.6s var(--ease) infinite; }
@keyframes cb-ping { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.6); } }

/* Tag: no box, a 2px bar and two lines of text with a dark halo, as on aggro trade. */
.cb-tag { position: absolute; display: grid; gap: 0; padding: 2px 8px 2px 10px; text-decoration: none; white-space: nowrap; pointer-events: auto;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 2px #000; }
.cb-tag::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: var(--text-3); }
.cb-tag.tone-live::before { background: var(--up); }
.cb-tag.tone-near::before { background: var(--accent); }
.cb-tag b { font: 600 14px/18px var(--sans); color: var(--text); }
.cb-tag span { font: 500 12px/16px var(--mono); color: var(--text-2); }
.cb-tag.tone-live span { color: var(--up); }
.cb-tag.tone-near span { color: var(--accent); }
.cb-tag.peek { z-index: 2; background: rgba(24, 24, 24, .92); border-radius: 6px; }

.cb-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.cb-row { display: grid; grid-template-columns: 32px minmax(120px, 1.4fr) minmax(80px, 2fr) 56px 72px 88px; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px;
  border-radius: 8px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); }
.cb-row:hover { border-color: var(--line-2); }
.cb-row .cb-logo { width: 32px; height: 32px; box-shadow: none; }
.cb-row-name { display: grid; min-width: 0; }
.cb-row-name b { font: 600 14px/20px var(--sans); }
.cb-row-name span { font: 400 12px/16px var(--sans); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-row-bar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.cb-row-fill { display: block; height: 100%; background: var(--text-3); border-radius: 3px; }
.tone-live .cb-row-fill { background: var(--up); }
.tone-near .cb-row-fill { background: var(--accent); }
.cb-row-pct, .cb-row-cap, .cb-row-when { font: 500 14px/20px var(--mono); text-align: right; }
.cb-row-when { color: var(--text-3); font-size: 12px; }

@media (max-width: 760px) {
  .cb-plot { height: 320px; }
  .cb[data-size="page"] .cb-plot { height: 380px; min-height: 0; }
  .cb-svg, .cb-beads, .cb-tags { inset: 16px 16px 36px; }
  .cb-svg { width: calc(100% - 32px); height: calc(100% - 52px); }
  .cb-ticks { inset: auto 16px 10px; }
  .cb-bead, .cb[data-size="page"] .cb-bead { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .cb-glyph { font-size: 10px; }
  .cb-row { grid-template-columns: 32px minmax(0, 1fr) 48px 64px; gap: 8px; }
  .cb-row-bar, .cb-row-when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-bead, .cb-logo img { transition: none; }
  .cb-bead.fresh::after { animation: none; opacity: 0; }
}