/* === FINAL.CSS ===
   assets/css/final.css
   НАЗНАЧЕНИЕ: финал сессии - экран WHAT I SEE, GO DEEPER, поле контакта, SESSION_END
   СВЯЗИ: assets/js/summary.js, stage.css (токены/сцена), base.css
   РАЗМЕР: ~160 строк */

/* ---------- ФИНАЛ: WHAT I SEE ---------- */

.av-sum {
    width: min(480px, 100%);
    text-align: left;
    animation: av-sum-in var(--dur-slow) var(--ease-out-expo) both;
}

@keyframes av-sum-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.av-sum-title {
    margin-bottom: 26px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.av-sum-item {
    padding: 18px 0;
    border-top: 1px solid var(--hair-2);
}

.av-sum-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 9px;
}

.av-sum-rank {
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--fg-faint);
}

.av-sum-cat {
    font-size: 9px;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.av-sum-text {
    font-family: var(--font-insight);
    font-style: italic;
    font-size: clamp(17px, 4.4vw, 20px);
    line-height: 1.46;
    color: var(--fg);
}

.av-sum-boundary {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--hair-2);
    font-size: 14px;
    line-height: 1.65;
    color: var(--fg-dim);
}

/* ---------- GO DEEPER ---------- */

.av-godeeper {
    display: block;
    width: 100%;
    margin-top: 32px;
    padding: 17px 20px;
    border: 1px solid var(--accent-line);
    border-radius: 1px;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    transition:
        border-color var(--dur-fast) var(--ease-out-quart),
        color var(--dur-fast) var(--ease-out-quart);
}

.av-godeeper:hover,
.av-godeeper:focus-visible {
    border-color: var(--accent);
    color: var(--fg);
}

/* ---------- КОНТАКТ ---------- */

.av-contact {
    margin-top: 32px;
    animation: av-sum-in var(--dur-med) var(--ease-out-quart) both;
}

.av-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 9px;
    transition: border-color var(--dur-fast) var(--ease-out-quart);
}

.av-contact-row:focus-within {
    border-bottom-color: var(--accent-soft);
}

.av-contact-row.is-invalid {
    border-bottom-color: var(--accent);
}

.av-contact-row input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    color: var(--fg);
}

.av-contact-row input::placeholder {
    color: var(--fg-faint);
}

.av-contact-hint {
    margin-top: 10px;
    min-height: 1.2em;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--accent-soft);
}

.av-contact-done {
    margin-top: 32px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg);
}

/* Тихий выход с экрана итога: тот же язык, что и .av-restart, но ближе к CTA */
.av-sum-exit {
    display: block;
    margin: 22px auto 0;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--fg-faint);
    transition: color var(--dur-fast) var(--ease-out-quart);
}

.av-sum-exit:hover,
.av-sum-exit:focus-visible {
    color: var(--fg-dim);
}

.av-restart {
    display: block;
    margin-top: 38px;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-faint);
    transition: color var(--dur-fast) var(--ease-out-quart);
}

.av-restart:hover,
.av-restart:focus-visible {
    color: var(--fg-dim);
}