/* Team updates timeline, Follow control and the "Your team" chip.
   Loaded by team/browse.html, main/index.html and matchup/browse_matchups.html.
   Colors come from the site tokens so light and dark both follow [data-theme]. */

/* ── Follow control (team page header) ── */
.team-follow {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.team-follow__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--team-primary-color, var(--primary-color, #10B981));
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

/* display:inline-flex above beats the UA [hidden] rule, so a dead button would show when storage is blocked */
.team-follow__btn[hidden] {
    display: none;
}

.team-follow__btn[aria-pressed="true"] {
    background: var(--team-primary-color, var(--primary-color, #10B981));
    color: #fff;
}

.team-follow__btn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* ── Updates timeline (team preview) ── */
.team-updates {
    margin: 16px 0 20px;
    padding: 16px 18px;
    border-radius: 14px;
}

.team-updates__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.team-updates__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.team-updates__title i {
    color: var(--team-primary-color, var(--primary-color, #10B981));
    margin-right: 4px;
}

.team-updates__new {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--team-primary-color, var(--primary-color, #10B981));
    color: #fff;
}

.team-updates__feed {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 4px;
}

.team-updates__feed:hover { color: var(--text-primary); }

.team-updates__week {
    border-top: 1px solid var(--border-color);
}

.team-updates__week-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    min-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    list-style: none;
}

.team-updates__week-head::-webkit-details-marker { display: none; }

.team-updates__week-head::before {
    content: "\25B8";
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.team-updates__week[open] > .team-updates__week-head::before { transform: rotate(90deg); }

.team-updates__week-title {
    font-weight: 700;
    color: var(--text-primary);
}

.team-updates__week-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.team-updates__list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.team-updates__item {
    padding: 10px 0 10px 14px;
    border-left: 2px solid var(--border-color);
    margin-left: 4px;
}

.team-updates__item + .team-updates__item { margin-top: 2px; }

.team-updates__item.is-new {
    border-left-color: var(--team-primary-color, var(--primary-color, #10B981));
}

.team-updates__meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.team-updates__kind { font-weight: 700; }

.team-updates__text {
    margin: 4px 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.team-updates__src {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.team-updates__src a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-updates__src a:hover { color: var(--text-primary); }

/* ── "Your team" chip (home and matchup pages) ── */
.your-team-chip {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 12px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.your-team-chip[hidden] { display: none; }

.your-team-chip__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.your-team-chip__team,
.your-team-chip__game {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
}

.your-team-chip__team { background: var(--accent-subtle, rgba(0, 0, 0, 0.06)); }
.your-team-chip__game { border: 1px solid var(--border-color); font-weight: 500; }

.your-team-chip__team:hover,
.your-team-chip__game:hover { text-decoration: underline; }

.your-team-chip__new {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary-color, #10B981);
    color: #fff;
}

[data-theme="dark"] .your-team-chip { box-shadow: none; }
[data-theme="dark"] .your-team-chip__team { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 640px) {
    .team-updates { padding: 12px; margin: 12px 0 16px; }
    .team-follow__btn { padding: 8px 12px; }
    .your-team-chip { border-radius: 14px; margin: 8px; }
}

/* The mobile "Teams" back button floats over the top 56px of the scrolling team panel, and
   jumping to the timeline parks its card at that edge, so the heading sat under the button.
   Extra top padding keeps the heading clear of it. Same breakpoint as .team-browser__back.
   (scroll-margin/scroll-padding did not help: the nested scroll ignored them.) */
@media (max-width: 768px) {
    .team-updates { padding-top: 60px; }
}