.tr-root {
    --tr-color: var(--green-500);
    width: 100%;
    padding: 0 0 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Collection-random note ---------- */

.tr-collection-note {
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--gray-200);
    color: var(--text-gray-dark-color);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

/* ---------- Loading / panels ---------- */

.tr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(22, 30, 57, .06);
}

.tr-panel__title {
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark-color);
    margin: 0;
}

.tr-panel__sub {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
    max-width: 380px;
}

/* ---------- Hero (pass status + stats) ---------- */

.tr-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 20px 8px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-primary);
    text-align: center;
}

/* Success and failure live in the ring and in the verdict line, not in a coloured plate. */
.tr-hero--ok .tr-hero__title { color: var(--green-700); }
.tr-hero--fail .tr-hero__title { color: var(--red-700); }

.tr-hero__sub {
    color: var(--text-secondary);
}


.tr-hero--ok { background: linear-gradient(135deg, var(--green-500) 0%, #14a87f 100%); }
.tr-hero--fail { background: linear-gradient(135deg, var(--red-500) 0%, #d84a3a 100%); }

.tr-hero__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

.tr-hero__title {
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.tr-hero__sub {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    opacity: .92;
    max-width: 460px;
}

.tr-hero__stats {
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

/* The numbers are tiles on the page, not translucent panes on a colour. */
.tr-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    border-radius: 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    align-items: center;
    text-align: center;
    color: var(--text-primary);
}

.tr-stat--ok .tr-stat__value { color: var(--green-700); }
.tr-stat--wrong .tr-stat__value { color: var(--red-700); }

/* Solid brand colours (matching the test statistics blocks) instead of a washed-out translucent fill. */
.tr-stat--time {
    background: var(--blue-color);
}

.tr-stat--ok {
    background: var(--green-color);
}

.tr-stat--wrong {
    background: var(--red-color);
}

.tr-stat__label {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-secondary);
}

.tr-stat__value {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */

.tr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    min-height: 48px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    transition: filter .15s ease, transform .1s ease;
}

    .tr-button:hover:not(:disabled) { filter: brightness(1.05); }
    .tr-button:active:not(:disabled) { transform: scale(.98); }

.tr-button--primary {
    background: var(--tr-color, var(--green-500));
    color: #FFFFFF;
}

/* ---------- Answers section ---------- */

.tr-section-title {
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark-color);
    margin: 8px 0 0 0;
}

.tr-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-answers__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-answer {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 12px rgba(22, 30, 57, .06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--gray-300);
}

.tr-answer--ok    { border-left-color: var(--green-500); }
.tr-answer--wrong { border-left-color: var(--red-500); }

.tr-answer__head {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 8px;
}

/* ---------- Per-question points pill ---------- */

.tr-answer__points {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tr-answer__points--ok {
    background: rgba(28, 205, 157, 0.16);
    color: #109970;
}

.tr-answer__points--zero {
    background: rgba(255, 105, 81, 0.14);
    color: #C63A24;
}

/* ---------- Score ring on the hero card ---------- */

.tr-hero__ring {
    width: 140px;
    height: 140px;
    margin: 0 auto 8px auto;
    background: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tr-answer__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
}

.tr-answer--ok .tr-answer__icon { background: var(--green-500); }
.tr-answer--wrong .tr-answer__icon { background: var(--red-500); }

.tr-answer__order {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

.tr-answer__title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dark-color);
    margin: 0;
    word-break: break-word;
    min-width: 0;
}

.tr-answer__time {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tr-answer__image-wrap {
    width: 100%;
    max-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.tr-answer__image {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.tr-answer__placeholder {
    margin: 0;
    padding: 10px 12px;
    background: var(--gray-200);
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--gray-600);
}

.tr-answer__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Per-type: lines, chips, ordered, pairs, sequence ---------- */

.tr-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--gray-200);
}

.tr-line--user    { /* uses default neutral background */ }
.tr-line--correct { background: #DFFCEF; }

.tr-line--ok    { background: #DFFCEF; }
.tr-line--wrong { background: #FCE0DB; }

.tr-line__label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tr-line--correct .tr-line__label { color: var(--success); }
.tr-line--ok      .tr-line__label { color: var(--success); }
.tr-line--wrong   .tr-line__label { color: var(--danger); }

.tr-line__value {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-dark-color);
    word-break: break-word;
}

/* Choice chips */

.tr-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--gray-200);
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    border: 1px solid transparent;
}

.tr-chip--ok      { background: var(--success-soft); color: var(--success); border-color: var(--success-mark); }
.tr-chip--wrong   { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-mark); }
.tr-chip--correct { background: transparent; color: var(--success); border-color: var(--success-mark); border-style: dashed; }

.tr-chip__mark {
    font-weight: 700;
    font-size: 12px;
}

/* Ordered list (Reorder) */

.tr-ordered {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tr-ordered__item {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 8px;
}

.tr-ordered__index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tr-color, var(--green-500));
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 12px;
}

.tr-line--correct .tr-ordered__index { background: var(--success); }
.tr-line--ok      .tr-ordered__index { background: var(--success); }
.tr-line--wrong   .tr-ordered__index { background: var(--danger); }

.tr-ordered__text {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-dark-color);
    word-break: break-word;
}

/* Match pairs */

.tr-pairs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tr-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 8px;
    border-left: 3px solid var(--gray-300);
}

.tr-pair--ok    { border-left-color: var(--green-500); }
.tr-pair--wrong { border-left-color: var(--red-500); }

.tr-pair__left,
.tr-pair__right {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-dark-color);
    word-break: break-word;
    min-width: 0;
}

.tr-pair__arrow {
    color: var(--gray-500);
    font-weight: 700;
}

/* Sequence blocks (horizontal flex-wrap) */

.tr-seq {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tr-seq__block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--text-dark-color);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    border: 1px solid var(--gray-300);
}

.tr-seq__order {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--tr-color, var(--green-500));
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.tr-line--correct .tr-seq__order { background: var(--success); }
.tr-line--ok      .tr-seq__order { background: var(--success); }
.tr-line--wrong   .tr-seq__order { background: var(--danger); }

/* ---------- Tablet and up ---------- */

@media (min-width: 768px) {
    .tr-hero {
        padding: 36px 28px;
    }

    .tr-hero__title {
        font-size: 24px;
    }
}


.tr-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.tr-actions .tr-button {
    flex: 1;
    justify-content: center;
    text-decoration: none;
}

/* ============================================================================
   RESULT ON A WIDE SCREEN
   The phone keeps the app's screen — coloured verdict, four numbers, breakdown.
   From 900px the breakdown gets the reading column and the answers to
   "what now" stand in a panel beside it.
   ========================================================================= */
@media (min-width: 900px) {
    .tr-root {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-areas:
            "head head"
            "hero hero"
            "list side";
        column-gap: 24px;
        align-items: start;
    }

    .tr-root > .pbar { grid-area: head; }
    .tr-hero { grid-area: hero; }
    .tr-answers { grid-area: list; }

    .tr-actions {
        grid-area: side;
        position: sticky;
        top: var(--sticky-top);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}