/* "How events like this performed" — historical-analog comparison.
   Shared by the card landing (/events/{id}) and the builder success screen. */
.eca-landing { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.eca-root { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 150, 255, 0.12); }
.eca-head { color: #e0e8f0; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.eca-sub { color: #94a3b8; font-size: 12.5px; margin-bottom: 12px; }
.eca-status, .eca-empty { color: #94a3b8; font-size: 13px; padding: 8px 0; }
.eca-empty { font-style: italic; }

.eca-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.eca-stat { background: rgba(13, 21, 32, 0.8); border: 1px solid rgba(0, 150, 255, 0.1); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.eca-stat-k { color: #64748b; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.eca-stat-v { color: #e0e8f0; font-weight: 700; font-size: 15px; }
.eca-pos { color: #00ff88; }
.eca-neg { color: #ff4444; }

.eca-bestworst { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
/* single line, ellipsis — long headlines must never push the card wider on mobile */
.eca-bw { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* chart wrapper: relative so the touch cursor/tip can absolutely position;
   touch-action:none so a drag READS the chart instead of scrolling the page. */
.eca-chart { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; }
.eca-svg { width: 100%; height: 200px; display: block; background: rgba(10, 14, 23, 0.6); border: 1px solid rgba(0, 150, 255, 0.1); border-radius: 8px; touch-action: none; }

.eca-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 207, 255, 0.55); pointer-events: none; z-index: 1; }
.eca-tip { position: absolute; top: 6px; z-index: 2; background: rgba(13, 21, 32, 0.96); border: 1px solid rgba(0, 150, 255, 0.25); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: #e0e8f0; pointer-events: none; white-space: nowrap; display: flex; gap: 8px; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.eca-tip b { font-weight: 700; }
.eca-tip-r { font-weight: 700; }
.eca-tip[hidden], .eca-cursor[hidden] { display: none; }

.eca-axis { display: flex; justify-content: space-between; color: #64748b; font-size: 10.5px; margin-top: 4px; padding: 0 2px; }

.eca-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.eca-lg { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 12px; }
.eca-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.eca-sw-mut { background: rgba(125, 143, 163, 0.55); }

.eca-note { color: #64748b; font-size: 11px; font-style: italic; margin-top: 8px; }

/* ---- Mobile (most users) ------------------------------------------------ */
@media (max-width: 520px) {
    .eca-landing { padding: 12px 12px 40px; }
    .eca-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .eca-stat { padding: 7px 8px; }
    .eca-stat-k { font-size: 9.5px; letter-spacing: 0.2px; }
    .eca-stat-v { font-size: 14px; }
    /* taller chart: narrow widths compress the curves horizontally, so give
       them more vertical room, and bump the touch readout to a legible size. */
    .eca-svg { height: 230px; }
    .eca-tip { font-size: 12.5px; padding: 5px 9px; top: 5px; }
    .eca-bw { font-size: 12.5px; }
    .eca-legend { gap: 5px 12px; }
    .eca-lg { font-size: 12.5px; }
}
@media (max-width: 360px) {
    /* on the smallest phones the 3 long stat labels get cramped — drop the
       median label to two tidy lines and keep values prominent. */
    .eca-stat-k { font-size: 9px; }
    .eca-stat-v { font-size: 13px; }
}