/*
 * Плейтесты острова: один длинный порядок действий.
 * Страница текстовая, поэтому держится на ритме: пронумерованные круги
 * проверки, две колонки вопросов (зелёная — спрашивать, красная — нет),
 * четыре ступени срочности багов и таблица чисел теста.
 * Цвет здесь только смысловой: зелёный — годится, красный — нет,
 * фиолетовый — правило Epic.
 */

.pt {
    padding: 4px 0 var(--section-gap);
}

/* Шапка раздела */

.pt__head {
    max-width: 74ch;
    margin-bottom: 28px;
}

.pt__badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(104, 80, 245, .12);
    color: var(--purple);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pt__head h1 {
    margin-top: 14px;
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
}

.pt__lead {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.pt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* Круги проверки */

.pt__rounds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap-sm);
    list-style: none;
}

.pt__round {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 88px;
}

.pt__round-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pt__round-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    color: var(--primary);
    font-size: var(--fs-sm);
    font-weight: 800;
}

.pt__round-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.pt__round-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.pt__round-dot {
    margin: 0 6px;
}

.pt__round-goal {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__round-watch {
    display: grid;
    gap: 8px;
    list-style: none;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.pt__round-watch li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

.pt__round-watch .icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--success);
}

.pt__round-done {
    margin-top: auto;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__round-done-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Закрытый плейтест: шаги с меткой источника */

.pt__session {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-sm);
    list-style: none;
}

.pt__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.pt-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pt-tag--rule {
    background: rgba(104, 80, 245, .12);
    color: var(--purple);
}

.pt-tag--tip {
    background: var(--bg-soft);
    color: var(--text-secondary);
}

.pt__step-title {
    font-size: var(--fs-body);
    font-weight: 700;
}

.pt__step-text {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__note,
.pt__sources-note {
    margin-top: 16px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    max-width: 80ch;
}

/* Вопросы после захода */

.pt__ask-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--gap-sm);
}

.pt__ask-title {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: var(--fs-body);
    font-weight: 700;
}

.pt__ask--good .pt__ask-title .icon {
    color: var(--success);
}

.pt__ask--bad .pt__ask-title .icon {
    color: var(--danger);
}

.pt__ask-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    list-style: none;
}

.pt__ask-q {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pt__ask-why {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
    list-style: none;
}

.pt__rule-title {
    font-size: var(--fs-body);
    font-weight: 700;
}

.pt__rule-text {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Баги */

.pt__bugs {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--gap-sm);
    align-items: start;
}

.pt__report-title {
    font-size: var(--fs-h3);
    font-weight: 700;
}

.pt__report-lead {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__report-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    counter-reset: report;
}

.pt__report-list li {
    counter-increment: report;
    padding-left: 30px;
    position: relative;
}

.pt__report-list li::before {
    content: counter(report);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.pt__report-field {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pt__report-text {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__report-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.pt__priorities {
    display: grid;
    gap: var(--gap-sm);
    list-style: none;
}

.pt__priority {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-left: 3px solid var(--border);
}

.pt__priority--p0 {
    border-left-color: var(--danger);
}

.pt__priority--p1 {
    border-left-color: var(--warning);
}

.pt__priority--p2 {
    border-left-color: var(--cyan);
}

.pt__priority--p3 {
    border-left-color: var(--text-muted);
}

.pt__priority-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.pt__priority--p0 .pt__priority-label {
    background: rgba(249, 97, 96, .12);
    color: var(--danger);
}

.pt__priority--p1 .pt__priority-label {
    background: rgba(247, 170, 70, .16);
    color: #B57312;
}

.pt__priority--p2 .pt__priority-label {
    background: rgba(53, 161, 253, .14);
    color: var(--cyan);
}

.pt__priority-title {
    font-size: var(--fs-body);
    font-weight: 700;
}

.pt__priority-text {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Числа теста */

.pt__metrics-lead {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    max-width: 80ch;
}

.pt__metrics {
    display: grid;
    gap: 0;
    margin-top: 16px;
    list-style: none;
}

.pt__metric {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.pt__metric-title {
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pt__metric-how,
.pt__metric-means {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__metric-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pt__metrics-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* A/B-тест обложки */

.pt__ab-lead {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    max-width: 80ch;
}

.pt__ab-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-sm);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    list-style: none;
}

.pt__ab-title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pt__ab-text {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__ab-note {
    margin-top: 16px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* Честный блок */

.pt__honest-card {
    display: grid;
    gap: 12px;
    max-width: 96ch;
}

.pt__honest-card p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__honest-card strong {
    color: var(--text-primary);
}

/* Что дальше и источники */

.pt__next,
.pt__sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-sm);
    list-style: none;
}

.pt__next-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
}

.pt__next-title {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-body);
    font-weight: 700;
}

.pt__next-text {
    grid-column: 1;
    grid-row: 2;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.pt__next-card .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    color: var(--primary);
}

.pt__source-title {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--primary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.pt__source-text {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

@media (max-width: 1024px) {
    .pt__bugs {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt__metric {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .pt__rounds,
    .pt__session,
    .pt__ask-grid,
    .pt__rules,
    .pt__ab-list,
    .pt__next,
    .pt__sources {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt__actions .btn {
        width: 100%;
        justify-content: center;
    }
}