/*
 * Área do aluno — quarta folha de estilos (M3, Tarefa D): o lado social da turma. aluno.css, aluno-pratica.css
 * e aluno-progresso.css ficam no orçamento de ~60 KB cada; mesmos tokens (--ta-*) e as mesmas regras de cor do
 * topo do aluno.css (o vermelho da marca não entra aqui). Carregada depois das outras (AlunoPanelProvider,
 * AssetVersion). Partials em resources/views/aluno/partials/social.
 *
 * Componentes (prefixo ta-)
 *   Missão     .ta-team(.is-achieved) > .ta-team-head (.ta-team-icon, .ta-team-heading > .ta-team-title +
 *              .ta-team-class, .ta-team-score "2/4" do Intensivão ou .ta-chip-ok "Cumprida") · .ta-team-row
 *              (a fileira da turma, só com 5 alunos ou mais: style="--ta-team-n: 10"; li.is-on = colega que
 *              garantiu a semana, sem nome nem ordem; li.is-target = a casa do alvo, com a marca "meta") ·
 *              .ta-team-text (o texto da missão) · .ta-team-weeks > li.is-on (as 4 semanas do Intensivão) ·
 *              .ta-team-mine(.is-done) (a parte do aluno, só na página da turma) · .ta-team-link
 *   Turma      .ta-team-stack (a pilha da página da turma) · .ta-team-cheer (a turma cumpriu a semana passada) ·
 *              .ta-team-reward (-title, -lead, -text: a recompensa do mês, texto do Thiago)
 *   Voto       .ta-vote (.ta-vote-title, .ta-vote-lead, .ta-vote-options > button.ta-vote-option[aria-pressed]
 *              com .ta-vote-mark + .ta-vote-label, .ta-vote-mine) · .ta-vote-chosen (tema escolhido; span + strong)
 *   Ranking    .ta-rank (seção #ranking: .ta-rank-lead) > .ta-rank-board (style="--ta-rank-cap: 150") >
 *              .ta-rank-list > li.ta-rank-row(.is-me) (.ta-rank-pos, .ta-rank-name + .ta-rank-tag, .ta-rank-pct,
 *              .ta-rank-bar > span com a largura; a marca fina é 100% da meta) · .ta-rank-you ("Você: 7º", só
 *              para ele) · .ta-rank-empty · .ta-rank-last (semana passada) · .ta-rank-me (apelido + "Sair") ·
 *              .ta-rank-join (form: .ta-field, .ta-rank-help, .ta-rank-consent) · .ta-rank-invite (convite da Hoje,
 *              sobre .ta-row)
 * Movimento: só a troca de estado do voto (resposta ao toque); nada com prefers-reduced-motion.
 */

/* ===== Missão da turma ===== */
.ta-team {
    display: grid; gap: .8rem; padding: 1.1rem 1.1rem 1.15rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-team-head { display: flex; align-items: center; gap: .75rem; }
.ta-team-icon {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
    background: var(--ta-navy); color: #fff;
}
.ta-team-icon .ta-icon { width: 20px; height: 20px; }
.ta-team.is-achieved .ta-team-icon { background: var(--ta-ok); }
.ta-team-heading { flex: 1; min-width: 0; }
.ta-team-title {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.1875rem; line-height: 1.2;
    color: var(--ta-navy);
}
.ta-team-class { margin: .1rem 0 0; font-size: .875rem; color: var(--ta-muted); overflow-wrap: anywhere; }
.ta-team-score {
    flex: none; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.125rem; line-height: 1;
    color: var(--ta-navy); background: var(--ta-bg); border-radius: var(--ta-pill); padding: .4rem .7rem;
    font-variant-numeric: tabular-nums;
}
.ta-team-head .ta-chip { flex: none; }

/* a fileira da turma: uma casa por colega; a marca "meta" fica no fim da casa do alvo */
.ta-team-row {
    list-style: none; margin: 0; padding: 1.15rem 0 0;
    display: grid; grid-template-columns: repeat(var(--ta-team-n, 10), minmax(0, 1fr));
    gap: clamp(2px, calc(48px / var(--ta-team-n, 10)), 5px);
}
.ta-team-row > li { position: relative; height: 16px; border-radius: 5px; background: #e6e3e5; }
.ta-team-row > li.is-on { background: var(--ta-navy); }
.ta-team.is-achieved .ta-team-row > li.is-on { background: var(--ta-ok); }
.ta-team-row > li.is-target::before {
    content: ""; position: absolute; right: -3px; top: -5px; bottom: -5px; width: 2px;
    border-radius: 2px; background: var(--ta-ink);
}
.ta-team-row > li.is-target::after {
    content: "meta"; position: absolute; right: -2px; bottom: calc(100% + 6px); transform: translateX(50%);
    font-size: .75rem; font-weight: 600; line-height: 1; color: var(--ta-ink);
}
.ta-team-text { margin: 0; color: var(--ta-ink); line-height: 1.5; font-weight: 600; }

.ta-team-weeks {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.ta-team-weeks > li {
    border-top: 6px solid #e6e3e5; padding-top: .35rem; font-size: .8125rem; color: var(--ta-muted);
    border-radius: 3px 3px 0 0;
}
.ta-team-weeks > li.is-on { border-top-color: var(--ta-ok); color: var(--ta-ok); font-weight: 600; }

.ta-team-mine { margin: 0; display: flex; align-items: flex-start; gap: .4rem; font-size: .9375rem; color: var(--ta-muted); line-height: 1.45; }
.ta-team-mine .ta-icon { margin-top: .15rem; flex: none; }
.ta-team-mine.is-done { color: var(--ta-ok); font-weight: 600; }
.ta-team-link {
    justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -.5rem 0 -.4rem;
    color: var(--ta-blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.ta-team-link:hover { text-decoration-thickness: 2px; }
.ta-team-link:focus-visible { outline: none; box-shadow: var(--ta-ring-focus); border-radius: 6px; }

/* ===== Página da turma: a pilha social ===== */
.ta-team-stack { display: grid; gap: .75rem; }
.ta-team-cheer {
    margin: 0; display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem;
    background: var(--ta-ok-bg); color: var(--ta-ok); border-radius: var(--ta-radius); font-weight: 600; line-height: 1.4;
}
.ta-team-cheer-icon {
    display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
    background: var(--ta-ok); color: #fff;
}
.ta-team-reward {
    display: grid; gap: .35rem; padding: 1rem 1.1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-team-reward p { margin: 0; }
.ta-team-reward-title { font-family: var(--ta-font-head); font-weight: 700; font-size: 1.125rem; color: var(--ta-navy); }
.ta-team-reward-lead { font-size: .9375rem; color: var(--ta-muted); }
.ta-team-reward-text { color: var(--ta-ink); line-height: 1.55; overflow-wrap: anywhere; }

/* ===== Voto de tema ===== */
.ta-vote {
    display: grid; gap: .75rem; padding: 1.1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-vote-title {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.1875rem; line-height: 1.25;
    color: var(--ta-navy); text-wrap: balance;
}
.ta-vote-lead { margin: 0; color: var(--ta-muted); font-size: .9375rem; line-height: 1.5; }
.ta-vote-options { display: grid; gap: .5rem; }
.ta-vote-option {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 52px; padding: .7rem .9rem;
    text-align: left; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ta-ink); cursor: pointer;
    background: #fff; border: 1.5px solid var(--ta-line-strong); border-radius: 12px;
    transition: background-color .12s, border-color .12s;
}
.ta-vote-option:hover { background: var(--ta-hover); }
.ta-vote-option:focus-visible { outline: none; box-shadow: var(--ta-ring-focus); }
.ta-vote-option:disabled { cursor: wait; }
.ta-vote-mark {
    display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--ta-line-strong); color: transparent;
}
.ta-vote-label { overflow-wrap: anywhere; }
.ta-vote-option[aria-pressed="true"] { border-color: var(--ta-blue); background: var(--ta-blue-soft); color: var(--ta-navy); }
.ta-vote-option[aria-pressed="true"] .ta-vote-mark { background: var(--ta-blue); border-color: var(--ta-blue); color: #fff; }
.ta-vote-mine { margin: 0; font-size: .9375rem; color: var(--ta-muted); }

.ta-vote-chosen {
    margin: 0; display: grid; gap: .2rem; padding: .95rem 1.1rem; border-radius: var(--ta-radius);
    background: var(--ta-navy); color: #fff;
}
.ta-vote-chosen span { font-size: .875rem; color: #d5dde7; }
.ta-vote-chosen strong { font-family: var(--ta-font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }

/* ===== Ranking da turma ===== */
.ta-rank-lead { margin: -.25rem 0 .9rem; color: var(--ta-muted); font-size: .9375rem; line-height: 1.5; }
.ta-rank-board {
    background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); overflow: hidden;
}
.ta-rank-list { list-style: none; margin: 0; padding: 0; }
.ta-rank-row {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; row-gap: .4rem;
    padding: .75rem 1rem;
}
.ta-rank-row + .ta-rank-row { border-top: 1px solid var(--ta-line); }
.ta-rank-row.is-me { background: var(--ta-blue-soft); }
.ta-rank-pos {
    font-family: var(--ta-font-head); font-weight: 700; font-size: 1.125rem; line-height: 1; color: var(--ta-navy);
    font-variant-numeric: tabular-nums;
}
.ta-rank-name { font-weight: 600; color: var(--ta-ink); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ta-rank-tag {
    font-size: .75rem; font-weight: 700; line-height: 1.3; padding: .1rem .5rem; border-radius: var(--ta-pill);
    background: var(--ta-blue); color: #fff;
}
.ta-rank-pct { font-weight: 700; color: var(--ta-navy); font-variant-numeric: tabular-nums; }
.ta-rank-bar {
    grid-column: 2 / 4; position: relative; height: 6px; border-radius: var(--ta-pill); background: #e6e3e5;
}
.ta-rank-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ta-navy); }
/* a marca fina: 100% da meta (a barra vai até o teto, 150%) */
.ta-rank-bar::after {
    content: ""; position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px;
    left: calc(100% * 100 / var(--ta-rank-cap, 150)); background: rgba(19, 38, 58, .45);
}
.ta-rank-you {
    margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem;
    padding: .8rem 1rem; border-top: 1px dashed var(--ta-line-strong); background: var(--ta-blue-soft);
}
.ta-rank-you-pct { font-weight: 600; color: var(--ta-navy); font-variant-numeric: tabular-nums; }
.ta-rank-empty { margin: 0; padding: .95rem 1rem; color: var(--ta-muted); line-height: 1.5; }
.ta-rank-last { margin: .75rem 0 0; color: var(--ta-muted); font-size: .9375rem; }
.ta-rank-me {
    margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
}
.ta-rank-me p { margin: 0; color: var(--ta-ink); line-height: 1.45; overflow-wrap: anywhere; }
.ta-rank-join {
    margin-top: 1rem; display: grid; gap: .75rem; padding: 1rem; background: var(--ta-card);
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-rank-join .ta-btn { justify-self: start; }
.ta-rank-help, .ta-rank-consent { margin: 0; font-size: .875rem; color: var(--ta-muted); line-height: 1.45; }
.ta-rank-invite .ta-row-icon { background: var(--ta-navy); color: #fff; }

@media (min-width: 640px) {
    .ta-vote-options { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .ta-vote-option { transition: none; }
}