/* Dungeon Tracker run page: header, qualifying run, the attempts table and its expandable PGCR details */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);

    &:hover {
        color: var(--color-gold);
    }

    svg {
        width: 0.875rem;
        height: 0.875rem;
    }
}

.run-hero {
    position: relative;
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.run-hero__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.run-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right in oklab,
        var(--color-surface),
        color-mix(in oklab, var(--color-surface) 80%, transparent),
        color-mix(in oklab, var(--color-surface) 20%, transparent)
    );
}

.run-hero__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.25rem;

    @media (min-width: 40rem) {
        padding: 2rem 1.5rem;
    }
}

.run-hero__title {
    margin-top: 0.25rem;
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-lh);
    font-weight: 600;
    letter-spacing: -0.025em;

    @media (min-width: 40rem) {
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
    }
}

.run-hero__stats {
    display: flex;
    gap: 1.5rem;
    text-align: right;

    dd {
        font-size: var(--text-xl);
        line-height: var(--text-xl-lh);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
}

.run-hero__stat--highlight {
    color: var(--color-green);
}

/* Label/value pairs used by the qualifying card and the expanded details */
.stat-list dd {
    margin-top: 0.125rem;
}

.qualifying {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in oklab, var(--color-green) 40%, transparent);
    border-radius: var(--radius-card);
    background: var(--color-green-dark);

    @media (min-width: 40rem) {
        padding-inline: 1.5rem;
    }
}

.qualifying--explorer {
    border-color: color-mix(in oklab, var(--color-gold) 70%, transparent);
    background: var(--color-amber-dark);
}

.qualifying__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.qualifying__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-green);
    font-size: var(--text-lg);
    line-height: var(--text-lg-lh);
    font-weight: 600;

    .qualifying--explorer & {
        color: var(--color-gold);
    }

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.qualifying__description {
    margin-top: 0.25rem;
    color: var(--color-muted-strong);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.qualifying__more {
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

.qualifying__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;

    @media (min-width: 40rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.qualifying__instance {
    color: var(--color-muted-strong);
    font-variant-numeric: tabular-nums;
}

.not-yet {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);

    @media (min-width: 40rem) {
        padding-inline: 1.5rem;
    }
}

.attempts {
    margin-top: 1.5rem;
}

.attempts__empty {
    margin-top: 0.75rem;
    padding: 2rem 1.25rem;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    text-align: center;
}

.run-table-wrap {
    margin-top: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
}

.run-table {
    width: 100%;
    min-width: 640px;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    text-align: left;

    > thead {
        border-bottom: 1px solid var(--color-line-soft);
        background: var(--color-surface-subtle);
        color: var(--color-muted);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    > thead th {
        font-weight: 600;
    }

    > thead th,
    .run-row > td {
        padding: 0.625rem 0.75rem;
    }

    > thead th:first-child,
    > thead th:last-child,
    .run-row > td:first-child,
    .run-row > td:last-child {
        padding-inline: 1rem;
    }

    > tbody {
        background: var(--color-surface);
        transition: opacity var(--transition);
    }

    /* Added by the Live Component while a row is loading (see data-loading in RunList) */
    > tbody.is-loading {
        opacity: 0.6;
    }

    > tbody > tr:not(:last-child) {
        border-bottom: 1px solid var(--color-line-soft);
    }
}

.run-table__timezone {
    color: color-mix(in oklab, var(--color-muted) 70%, transparent);
    letter-spacing: normal;
    text-transform: none;
}

.run-table__numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.run-table__muted {
    color: var(--color-muted-strong);
}

.run-table__bad {
    color: var(--color-red);
}

.run-row {
    cursor: pointer;
    transition: background-color var(--transition);

    &:hover {
        background: var(--color-surface-raised);
    }
}

.run-row--qualifying,
.run-row--qualifying:hover {
    background: color-mix(in oklab, var(--color-green-dark) 70%, transparent);
}

.run-row--qualifying-explorer,
.run-row--qualifying-explorer:hover {
    background: color-mix(in oklab, var(--color-amber-dark) 70%, transparent);
}

.run-row--expanded {
    box-shadow: inset 3px 0 0 var(--color-gold);
}

.run-row__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.run-row__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.run-row__chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--transition);

    .run-row--expanded & {
        color: var(--color-gold);
        transform: rotate(90deg);
    }
}

.qualifying-badge {
    margin-left: 0.375rem;
    padding: 0.125rem 0.375rem;
    border: 1px solid color-mix(in oklab, var(--color-gold) 60%, transparent);
    border-radius: 0.25rem;
    color: var(--color-gold);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.run-row__checkpoint {
    margin-left: 0.25rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

/* Result badges; the modifier is the RunResult enum value */
.result {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--color-line-soft);
    border-radius: 0.25rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    font-weight: 600;
    white-space: nowrap;
}

.result--solo_flawless {
    border-color: color-mix(in oklab, var(--color-green) 40%, transparent);
    background: var(--color-green-dark);
    color: var(--color-green);
}

.result--solo,
.result--flawless {
    border-color: color-mix(in oklab, var(--color-amber) 40%, transparent);
    background: color-mix(in oklab, var(--color-amber-dark) 60%, transparent);
    color: var(--color-amber);
}

.result--completed {
    border-color: var(--color-line);
    background: var(--color-surface-raised);
    color: var(--color-muted-strong);
}

/* Expanded row */
.run-details-cell {
    padding: 1.25rem 1rem;
    background: var(--color-surface-subtle);
    box-shadow: inset 3px 0 0 var(--color-gold);

    @media (min-width: 40rem) {
        padding-inline: 1.5rem;
    }
}

.run-details__message {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.run-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.run-details__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.run-details__breakdown {
    color: var(--color-muted-strong);
}

.run-details__columns {
    display: grid;
    gap: 1.5rem;

    @media (min-width: 64rem) {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

.run-details__footer {
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

.text-amber {
    color: var(--color-amber);
}

.text-red {
    color: var(--color-red);
}

.text-muted {
    color: var(--color-muted);
}

.fireteam {
    width: 100%;
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);

    thead {
        color: var(--color-muted);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
    }

    thead tr {
        border-bottom: 1px solid var(--color-line-soft);
    }

    th {
        padding: 0.375rem 0.5rem;
        font-weight: 400;
        text-align: right;
    }

    td {
        padding: 0.5rem;
    }

    th:first-child,
    td:first-child {
        padding-left: 0;
        padding-right: 0.75rem;
        text-align: left;
    }

    th:last-child,
    td:last-child {
        padding-right: 0;
    }

    tbody > tr:not(:last-child) {
        border-bottom: 1px solid var(--color-line-soft);
    }
}

.fireteam__self {
    color: var(--color-gold);
    font-weight: 600;
}

.fireteam__link {
    text-decoration-line: underline;
    text-decoration-color: var(--color-line);
    text-underline-offset: 4px;

    &:hover {
        color: var(--color-gold);
        text-decoration-color: var(--color-gold);
    }
}

.fireteam__meta {
    display: block;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

.weapons {
    margin-top: 0.5rem;

    > li:not(:last-child) {
        border-bottom: 1px solid var(--color-line-soft);
    }
}

.weapons__empty {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.weapon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

.weapon__icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    border-radius: 0.25rem;

    .weapon--exotic & {
        border-color: color-mix(in oklab, var(--color-gold) 60%, transparent);
    }
}

.weapon__icon--placeholder {
    background: var(--color-surface-raised);
}

.weapon__body {
    min-width: 0;
    flex: 1;
}

.weapon__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
}

.weapon__line--secondary {
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
}

.weapon__name,
.weapon__type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weapon--exotic .weapon__name {
    color: var(--color-gold);
}

.weapon__number {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.weapon .progress-bar {
    height: 0.125rem;
    margin-top: 0.25rem;
}

.weapon .progress-bar__fill {
    background: var(--color-neutral);
}

.weapon--exotic .progress-bar__fill {
    background: var(--color-gold);
}