/**
 * Team plugin CSS — historic-lineup timeline (.tlh-*)
 *
 * Only loaded on the team page (frontend/team). Vertical spine timeline of
 * roster eras, newest-first, current era highlighted, joined/left markers.
 */

.tlh { position: relative; z-index: 2; max-width: 56rem; margin: 0 auto; padding: 48px 24px 64px; }
.tlh-title { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #6b7280; margin-bottom: 24px; }

.tlh-spine { position: relative; padding-left: 28px; }
.tlh-spine::before {
    content: '';
    position: absolute; top: 6px; bottom: 6px; left: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--team, #8b5cf6) 0%, rgba(255,255,255,0.08) 100%);
}

.tlh-era { position: relative; padding: 0 0 28px; }
.tlh-era:last-child { padding-bottom: 0; }
.tlh-era::before {
    content: '';
    position: absolute; top: 4px; left: -28px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #1a1a2e; border: 2px solid rgba(255,255,255,0.2);
}
.tlh-era.tlh-now::before {
    background: var(--team, #8b5cf6);
    border-color: var(--team, #8b5cf6);
    box-shadow: 0 0 12px var(--team-40, rgba(139,92,246,0.4));
}

.tlh-dates { font-size: 12px; color: #9ca3af; margin-bottom: 10px; }
.tlh-now-tag {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 8px;
    background: var(--team-20, rgba(139,92,246,0.2)); color: var(--team, #8b5cf6);
}

.tlh-roster { display: flex; flex-wrap: wrap; gap: 8px; }
.tlh-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px; color: #e5e7eb;
}
.tlh-role { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--team, #8b5cf6); opacity: 0.85; }

.tlh-changes { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; }
.tlh-in { color: #4ade80; }
.tlh-out { color: #f87171; }

@media (max-width: 640px) {
    .tlh { padding: 32px 16px 48px; }
    .tlh-spine { padding-left: 22px; }
    .tlh-era::before { left: -22px; }
}

/**
 * Major timeline (v4 mockup, .tmt-*) — CS2 Major participation grid.
 * Only loaded on the team page (frontend/team). One column per Major, one
 * row per player, solid bar per attended Major, dashed bridge across the
 * gutter when a player played two consecutive Majors back to back.
 */

.tmt { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; padding: 48px 24px 64px; }
.tmt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.tmt-title { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #6b7280; margin: 0; }

.tmt-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.tmt-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }
.tmt-select {
    padding: 8px 10px; border-radius: 8px; font-size: 13px; text-transform: none; letter-spacing: normal;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #e5e7eb;
}
.tmt-apply {
    padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    background: var(--team-20, rgba(139,92,246,0.2)); border: 1px solid var(--team-40, rgba(139,92,246,0.4)); color: var(--team, #8b5cf6);
    cursor: pointer; transition: background 0.2s;
}
.tmt-apply:hover { background: var(--team-40, rgba(139,92,246,0.4)); }

.tmt-scroll { overflow-x: auto; }

.tmt-grid {
    display: grid;
    column-gap: var(--tmt-gap, 16px);
    row-gap: 10px;
    align-items: center;
    min-width: 640px;
}

.tmt-corner { min-width: 0; }

/* Header cards: minimal "pin" style — icon (tournament logo or medal) on
   top, name, small date. Every card renders the same three slots (fixed
   heights), so all cards in the row stay identical in height. Placement
   detail lives in the link's title tooltip. */
.tmt-header-cell { display: flex; align-items: stretch; }
.tmt-header-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; padding: 10px 8px; border-radius: 10px; text-align: center;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none; transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.tmt-header-link:hover { border-color: var(--team-40, rgba(139,92,246,0.4)); background: rgba(255,255,255,0.06); }
.tmt-icon { height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.tmt-tname { font-size: 13px; font-weight: 700; color: #e5e7eb; min-height: 18px; }
.tmt-tdate { font-size: 11px; color: #9ca3af; min-height: 14px; }
/* Logo variant: the card body is just the tournament logo (name/date/placement
   in the tooltip) — no card chrome, the logo stands on its own. Fixed logo
   height keeps it level with text-fallback cards. */
.tmt-header-link--logo { padding: 10px 8px 12px; background: transparent; border-color: transparent; }
.tmt-header-link--logo:hover { background: rgba(255,255,255,0.04); border-color: transparent; }
.tmt-card-logo { height: 32px; max-width: 88%; object-fit: contain; }

.tmt-player-cell { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e5e7eb; }
.tmt-role-chip { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--team, #8b5cf6); opacity: 0.85; }
.tmt-player-name { flex: 1; overflow-wrap: break-word; word-break: break-word; }
/* Timeline player name links straight to their PRO/Legend profile. */
.tmt-player-link { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.15s; }
.tmt-player-link:hover { color: #c4b5fd; text-decoration: underline; }
.tmt-player-link:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; border-radius: 3px; }
.tmt-flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

.tmt-cell { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; }
.tmt-bar {
    display: block; width: 100%; height: 16px; border-radius: 8px;
    background: linear-gradient(90deg, var(--team, #8b5cf6), var(--team-40, rgba(139,92,246,0.4)));
}
.tmt-bar.tmt-standin {
    background: repeating-linear-gradient(45deg, var(--team-40, rgba(139,92,246,0.4)) 0 6px, transparent 6px 12px);
    border: 1px dashed var(--team, #8b5cf6);
}
.tmt-bridge {
    position: absolute; top: 50%; right: calc(-1 * var(--tmt-gap, 16px));
    width: var(--tmt-gap, 16px); height: 0;
    border-top: 2px dashed var(--team, #8b5cf6);
    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 640px) {
    .tmt { padding: 32px 16px 48px; }
    .tmt-filter { gap: 10px; }
}