/* Player page — trends section. Owned by the trends worker. */
#trends {
    --tr-line: #3f8ae6;
    --heat-0: var(--surface-2);
    --heat-1: #1c3557;
    --heat-2: #1f4f8f;
    --heat-3: #2a6cc4;
    --heat-4: #3f8ae6;
    --heat-5: #86b6ef;
}
#trends .card-head .section-sub { margin-top: 2px; }
#trends .card-body { min-height: 120px; }

/* Rank legend: toggle buttons showing role + current rank */
.tr-rank-legend { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tr-role-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface-2);
    font-size: var(--fs-xs); color: var(--text-2);
}
.tr-role-btn:hover { border-color: var(--text-3); }
.tr-role-btn b { color: var(--text); font-weight: 600; }
.tr-role-btn[aria-pressed="false"] { opacity: .5; }
.tr-role-btn[aria-pressed="false"] .legend-swatch { background: var(--text-3); }

.tr-legend-slot { margin-bottom: var(--sp-2); }
.tr-legend-slot:empty { display: none; }
.legend-swatch.dashed {
    background: none; height: 0; border-top: 2px dashed var(--swatch);
    border-radius: 0;
}

/* Calendar heatmap */
.tr-heat-scroll { overflow-x: auto; padding-bottom: var(--sp-2); }
.tr-heat { min-width: 640px; position: relative; }
.tr-heat-months, .tr-heat-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(9px, 1fr));
    gap: 3px;
}
.tr-heat-months { height: 18px; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.tr-heat-months span { white-space: nowrap; line-height: 18px; }
.tr-heat-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.tr-cell {
    aspect-ratio: 1; border-radius: 2px; background: var(--heat-0);
    border: 0; padding: 0; cursor: default;
}
.tr-cell[data-level="1"] { background: var(--heat-1); }
.tr-cell[data-level="2"] { background: var(--heat-2); }
.tr-cell[data-level="3"] { background: var(--heat-3); }
.tr-cell[data-level="4"] { background: var(--heat-4); }
.tr-cell[data-level="5"] { background: var(--heat-5); }
.tr-cell.future { visibility: hidden; }
.tr-cell:hover { outline: 1px solid var(--text-2); }
.tr-heat-legend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.tr-heat-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.tr-tip {
    position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
    background: #0b0c0f; border: 1px solid #343946; border-radius: 8px;
    padding: 6px 10px; font-size: var(--fs-xs); color: var(--text);
    transform: translate(-50%, -100%);
}
.tr-tip span { color: var(--text-2); }

/* Metric selector scrolls inside its card on narrow screens */
#trPerfControls { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#trPerfControls::-webkit-scrollbar { display: none; }