/*
 * Área do aluno — 5ª folha (M4, Tarefa C): convite de indicação (público e a prévia em /indicar), pedido de
 * avaliação (/depoimento), Minha evolução (/evolucao), fim do Intensivão (/intensivao/{id}/fim) e o card
 * informativo da Hoje. Usa os tokens de aluno.css (--ta-*); carregada pelo AlunoPanelProvider e pela página
 * pública do convite. Só modo claro, base 390 px.
 *
 * Componentes
 *   Convite     .ta-invite (.ta-invite-from, .ta-invite-title, .ta-invite-letter > p + footer, .ta-invite-cta,
 *               .ta-invite-note) · .ta-ticket (.ta-ticket-main, .ta-ticket-stub, .ta-ticket-label, .ta-ticket-value,
 *               .ta-ticket-code): o benefício e o código como um ingresso destacável.
 *   Prévia      .ta-preview (moldura "o que seu amigo vê") · .ta-share (link + botões de compartilhar).
 *   Avaliação   .ta-stars (5 notas, radio acessível) · .ta-consents (consentimentos separados, desmarcados).
 *   Evolução    .ta-climb (.ta-climb-ends: entrada → hoje, .ta-climb-end/.is-today; .ta-climb-rail com um
 *               .ta-climb-tick por nível, [data-band], .is-before/.is-walked/.is-today; .ta-climb-scale; .ta-climb-gain)
 *               · .ta-facts (números do estudo) · .ta-errors (5 erros + plano: .ta-error, .ta-error-bar,
 *               .ta-error-tip, .ta-error-plan) · .ta-month (Resumo do mês).
 *   Fim         .ta-finale (celebração marinha) · .ta-cert-card · .ta-grace (aviso da graça) · .ta-continue
 *               (o único cartão comercial, só nesta página).
 *   Hoje        .ta-info-card (no máximo um card informativo).
 *   Celebração  .ta-cele-refer ("Indicar um amigo" na tela cheia de conquista, só com a chave da turma).
 */

/* ===== Convite (página pública e prévia) ===== */
.ta-invite { display: grid; gap: 1.25rem; max-width: 34rem; margin: 0 auto; }
.ta-invite-from { margin: 0; color: var(--ta-muted); font-size: .9375rem; }
.ta-invite-title {
    margin: -.5rem 0 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy);
    font-size: 2rem; line-height: 1.08; letter-spacing: -.02em;
}
.ta-invite-letter {
    margin: 0; padding: 1.25rem 1.25rem 1.1rem; background: var(--ta-card); border-radius: var(--ta-radius);
    border: 1px solid var(--ta-line); box-shadow: var(--ta-shadow); position: relative;
}
.ta-invite-letter::before {
    content: ''; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--ta-red);
}
.ta-invite-letter p { margin: 0; line-height: 1.6; color: var(--ta-ink); font-size: 1.0625rem; }
.ta-invite-letter footer { margin-top: .9rem; font-family: var(--ta-font-head); font-weight: 600; color: var(--ta-navy); }
.ta-invite-cta { font-size: 1.0625rem; }
.ta-invite-note { margin: -.5rem 0 0; color: var(--ta-muted); font-size: .875rem; line-height: 1.5; }

/* o ingresso: o benefício à esquerda, o canhoto com o código à direita; picote tracejado com os dois recortes */
.ta-ticket {
    --ta-notch: 11px; --ta-stub: 8rem;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--ta-navy); color: #fff;
    border-radius: var(--ta-radius); position: relative; overflow: hidden;
    -webkit-mask:
        radial-gradient(circle var(--ta-notch) at calc(100% - var(--ta-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--ta-notch) at calc(100% - var(--ta-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--ta-notch) at calc(100% - var(--ta-stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--ta-notch) at calc(100% - var(--ta-stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ta-ticket-main, .ta-ticket-stub { display: grid; align-content: center; gap: .3rem; padding: 1.1rem 1.15rem; }
.ta-ticket-stub { width: var(--ta-stub); box-sizing: border-box; border-left: 2px dashed rgba(255, 255, 255, .38); text-align: center; }
.ta-ticket-label { font-size: .8125rem; color: rgba(255, 255, 255, .78); }
.ta-ticket-value { font-family: var(--ta-font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.ta-ticket-code {
    font-family: var(--ta-font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}

/* ===== Indicar um amigo (/indicar) ===== */
.ta-preview {
    border: 1px solid var(--ta-line-strong); border-radius: 22px; background: var(--ta-bg); padding: 1rem .9rem 1.25rem;
    position: relative;
}
.ta-preview-bar {
    display: flex; align-items: center; gap: .5rem; margin: -.1rem 0 .9rem; padding: .45rem .75rem;
    border-radius: var(--ta-pill); background: #fff; border: 1px solid var(--ta-line); color: var(--ta-muted);
    font-size: .8125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ta-preview .ta-invite { gap: 1rem; }
.ta-preview .ta-invite-title { font-size: 1.5rem; }
.ta-preview .ta-invite-letter p { font-size: .9375rem; }
.ta-share { display: grid; gap: .75rem; }
.ta-share-link {
    display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: var(--ta-radius-sm);
    background: var(--ta-card); border: 1px solid var(--ta-line); font-size: .9375rem; color: var(--ta-ink);
    overflow-wrap: anywhere;
}
.ta-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ta-share-done { color: var(--ta-ok); font-weight: 600; font-size: .9375rem; }
.ta-referral-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ta-referral-list li {
    display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .75rem .9rem;
    background: var(--ta-card); border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); font-size: .9375rem;
}

/* ===== Avaliação (/depoimento) ===== */
.ta-stars { display: flex; gap: .35rem; border: 0; padding: 0; margin: 0; }
.ta-stars legend { margin-bottom: .5rem; font-weight: 600; color: var(--ta-ink); }
.ta-star { position: relative; }
.ta-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ta-star span {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--ta-line-strong);
    background: #fff; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.25rem; color: var(--ta-navy);
    cursor: pointer;
}
.ta-star input:checked + span { background: var(--ta-navy); border-color: var(--ta-navy); color: #fff; }
.ta-star input:focus-visible + span { box-shadow: var(--ta-ring-focus); }
.ta-stars-scale { display: flex; justify-content: space-between; max-width: 18.5rem; margin-top: .35rem; color: var(--ta-muted); font-size: .8125rem; }
.ta-consents { display: grid; gap: .6rem; border: 0; margin: 0; padding: 0; }
.ta-consents legend { font-weight: 600; margin-bottom: .35rem; }
.ta-consent {
    display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .8rem .9rem;
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); background: #fff; cursor: pointer;
}
.ta-consent input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--ta-blue); }
.ta-consent strong { display: block; font-weight: 600; }
.ta-consent span span { color: var(--ta-muted); font-size: .875rem; }
.ta-consent.is-blocked { background: var(--ta-hover); cursor: default; }
.ta-textarea {
    width: 100%; min-height: 7.5rem; box-sizing: border-box; padding: .75rem .9rem; border-radius: var(--ta-radius-sm);
    border: 1px solid var(--ta-line-strong); font: inherit; font-size: 16px; line-height: 1.5; background: #fff; resize: vertical;
}
.ta-textarea:focus { outline: none; box-shadow: var(--ta-ring-focus); }
.ta-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ta-ask-card {
    display: grid; gap: .5rem; padding: 1.1rem 1.15rem; border-radius: var(--ta-radius); background: var(--ta-card);
    border: 1px solid var(--ta-line); box-shadow: var(--ta-shadow);
}
.ta-ask-card h2, .ta-ask-card h3 { margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.125rem; color: var(--ta-navy); }
.ta-ask-card p { margin: 0; color: var(--ta-muted); }
.ta-ask-card .ta-btn { justify-self: start; }

/* ===== Minha evolução (/evolucao) ===== */
/* a subida: entrada → hoje, e embaixo o trilho dos 15 níveis na cor de cada faixa */
.ta-climb {
    display: grid; gap: .9rem; padding: 1.25rem 1.15rem 1.1rem; border-radius: 20px;
    background: var(--ta-card); border: 1px solid var(--ta-line); box-shadow: var(--ta-shadow);
}
.ta-climb-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; align-items: center; }
.ta-climb-end { display: grid; gap: .1rem; min-width: 0; }
.ta-climb-end.is-today { text-align: right; }
.ta-climb-arrow { color: var(--ta-line-strong); display: grid; place-items: center; }
.ta-climb-when { color: var(--ta-muted); font-size: .8125rem; }
.ta-climb-level {
    font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-band-ink, var(--ta-navy)); font-size: 1.75rem;
    line-height: 1.05; letter-spacing: -.02em;
}
.ta-climb-end:not(.is-today) .ta-climb-level { color: var(--ta-muted); font-size: 1.375rem; }
.ta-climb-note { color: var(--ta-muted); font-size: .8125rem; line-height: 1.35; }
.ta-climb-rail { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ta-climb-tick { flex: 1 1 0; height: 10px; border-radius: 3px; background: var(--ta-line); }
.ta-climb-tick.is-walked { background: var(--ta-band, var(--ta-blue)); }
.ta-climb-tick.is-before { background: var(--ta-band, var(--ta-blue)); opacity: .28; }
.ta-climb-tick.is-today { height: 16px; margin-top: -3px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ta-band, var(--ta-blue)); }
.ta-climb-scale { display: flex; justify-content: space-between; margin: -.35rem 0 0; color: var(--ta-muted); font-size: .75rem; }
.ta-climb-gain { margin: 0; padding-top: .85rem; border-top: 1px solid var(--ta-line); font-weight: 600; color: var(--ta-ink); line-height: 1.45; }
.ta-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.ta-facts > div { padding: .85rem .9rem; border-radius: var(--ta-radius-sm); background: var(--ta-card); border: 1px solid var(--ta-line); }
.ta-facts dt { color: var(--ta-muted); font-size: .8125rem; }
.ta-facts dd { margin: .15rem 0 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.5rem; color: var(--ta-navy); line-height: 1.1; }
.ta-facts dd small { display: block; font-family: var(--ta-font-body); font-weight: 400; font-size: .8125rem; color: var(--ta-muted); margin-top: .2rem; }
.ta-cando-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ta-cando-list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .9375rem; }
.ta-cando-list li::before {
    content: ''; width: 18px; height: 18px; margin-top: .1rem; border-radius: 50%; background: var(--ta-ok-bg);
    box-shadow: inset 0 0 0 5px var(--ta-ok-bg), inset 0 0 0 9px var(--ta-ok);
}

.ta-errors { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: ta-err; }
.ta-error {
    display: grid; gap: .45rem; padding: .95rem 1rem; background: var(--ta-card); border: 1px solid var(--ta-line);
    border-radius: var(--ta-radius); counter-increment: ta-err;
}
.ta-error-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.ta-error-title { margin: 0; font-weight: 600; color: var(--ta-ink); }
.ta-error-title::before { content: counter(ta-err) '. '; color: var(--ta-muted); font-weight: 500; }
.ta-error-count { color: var(--ta-muted); font-size: .8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-error-bar { height: 6px; border-radius: 3px; background: var(--ta-err-bg); overflow: hidden; }
.ta-error-bar span { display: block; height: 100%; background: var(--ta-err); border-radius: 3px; }
.ta-error-tip { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ta-ink); }
.ta-error-tip b { font-weight: 600; }
.ta-error-plan { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; font-size: .875rem; color: var(--ta-muted); }
.ta-error-plan form { margin: 0; }
.ta-month { display: grid; gap: .6rem; }
.ta-month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

/* ===== Fim do Intensivão (/intensivao/{id}/fim) ===== */
.ta-finale {
    position: relative; overflow: hidden; display: grid; gap: .6rem; padding: 1.6rem 1.25rem 1.4rem; border-radius: 22px;
    background: var(--ta-navy); color: #fff;
}
/* o anel fica no canto, acima do título (QA do M4: a 390 px o anel maior cortava "para o" do título) */
.ta-finale::after {
    content: ''; position: absolute; right: -3.25rem; top: -3.25rem; width: 7.5rem; height: 7.5rem; border-radius: 50%;
    border: 12px solid var(--ta-red); opacity: .9;
}
.ta-finale-kicker { margin: 0; color: rgba(255, 255, 255, .8); font-size: .9375rem; position: relative; z-index: 1; }
.ta-finale-title {
    margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 2.125rem; line-height: 1.02;
    letter-spacing: -.02em; max-width: 14ch; position: relative; z-index: 1;
}
.ta-finale-text { margin: 0; color: rgba(255, 255, 255, .88); line-height: 1.55; max-width: 36ch; position: relative; z-index: 1; }
.ta-finale-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .4rem 0 0; position: relative; z-index: 1; }
.ta-finale-stats div { display: grid; }
.ta-finale-stats dt { font-size: .8125rem; color: rgba(255, 255, 255, .75); }
.ta-finale-stats dd { margin: 0; font-family: var(--ta-font-head); font-weight: 700; font-size: 1.375rem; }
.ta-cert-card {
    display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem 1.1rem;
    border-radius: var(--ta-radius); background: var(--ta-card); border: 1px solid var(--ta-line); box-shadow: var(--ta-shadow);
}
.ta-cert-seal {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ta-navy);
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ta-line-strong);
}
.ta-cert-card h2, .ta-cert-card h3 { margin: 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy); font-size: 1.0625rem; }
.ta-cert-card p { margin: .15rem 0 0; color: var(--ta-muted); font-size: .9375rem; }
.ta-cert-card .ta-btn { grid-column: 1 / -1; justify-self: start; }
.ta-grace {
    display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .95rem 1rem; border-radius: var(--ta-radius);
    background: var(--ta-blue-soft); color: var(--ta-ink); line-height: 1.5;
}
.ta-grace p { margin: 0; }
.ta-continue {
    display: grid; gap: .6rem; padding: 1.25rem 1.2rem; border-radius: var(--ta-radius); background: #fff;
    border: 2px solid var(--ta-navy);
}
.ta-continue h2 { margin: 0; font-family: var(--ta-font-head); font-weight: 700; color: var(--ta-navy); font-size: 1.375rem; }
.ta-continue p { margin: 0; line-height: 1.55; }
.ta-continue .ta-btn { justify-self: start; }

/* ===== Hoje: o card informativo (no máximo um) ===== */
.ta-info-card { border-left: 4px solid var(--ta-navy); }

/* ===== Celebração: "Indicar um amigo" (chave "Convite de indicação"; mais discreto que o "Compartilhar") ===== */
.ta-cele-refer {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
    color: #dbe4ee; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.ta-cele-refer:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; border-radius: 8px; }
.ta-cele-share + .ta-cele-refer { margin-top: -.7rem; } /* os dois links formam um par, abaixo do "Continuar" */

@media (min-width: 640px) {
    .ta-invite-title { font-size: 2.35rem; }
    .ta-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ta-finale { padding: 2rem 1.75rem 1.75rem; }
    .ta-finale-title { font-size: 2.6rem; }
}
.ta-testimonial { display: grid; gap: 1.1rem; }
.ta-testimonial .ta-goal-lead { margin: 0; font-weight: 600; color: var(--ta-navy); font-size: 1.0625rem; }
.ta-testimonial .ta-stars-scale { margin-top: -.6rem; }
.ta-testimonial .ta-field { display: grid; gap: .4rem; }