/* A player's career, laid out as a card meant to be screenshotted. */

body {
    margin: 0;
    background-color: #f8f9fa;
    color: #111111;
    font-family: var(--font-primary);
}

.pl-page {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.pl-missing,
.pl-back {
    font-size: 0.95rem;
    color: #666666;
}

.pl-back {
    margin: 1.25rem 0 0;
    text-align: center;
}

.pl-back a,
.pl-missing a {
    color: #111111;
}

/* --- the card ----------------------------------------------------------- */

.pl-card {
    background: #ffffff;
    border: 1px solid #e6e8eb;
    padding: 1.75rem 1.5rem 1.25rem;
}

.pl-card__head {
    padding-bottom: 1.1rem;
    border-bottom: 2px solid #111111;
}

.pl-card__eyebrow {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-card__name {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
}

.pl-headline {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.pl-headline__num {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 14vw, 4.5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.pl-headline__word {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
}

/* --- stat row ----------------------------------------------------------- */

.pl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-stat {
    padding: 1rem 0.75rem 1rem 0;
}

.pl-stat dt {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa3ad;
    margin-bottom: 0.3rem;
}

.pl-stat dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pl-stat__sub {
    font-size: 0.7rem;
    color: #9aa3ad;
    margin-left: 1px;
}

/* --- W/D/L bar ---------------------------------------------------------- */

.pl-record {
    padding: 1.15rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-record__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.pl-record__label,
.pl-teams__label,
.pl-next__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-record__rate {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
}

.pl-record__bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    background: #f1f3f5;
}

.pl-record__seg {
    display: block;
    flex-basis: 0;
}

.pl-record__seg--w { background: #5FBB97; }
.pl-record__seg--d { background: #d5d9de; }
.pl-record__seg--l { background: #e8909f; }

.pl-record__key {
    display: flex;
    gap: 1rem;
    margin-top: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* --- team breakdown ----------------------------------------------------- */

.pl-teams {
    padding: 1.15rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-teams__label {
    display: block;
    margin: 0 0 0.75rem;
}

.pl-teams__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    /* Fixed layout so the stat columns divide the row evenly however many of
       them this player has earned. Left to itself the table sizes each column
       to its content, which parks every number in a clump on the right with a
       gulf between them and the team they belong to. */
    table-layout: fixed;
}

.pl-teams__table th,
.pl-teams__table td {
    padding: 0.4rem 0 0.4rem 0.55rem;
    text-align: right;
    white-space: nowrap;
}

.pl-teams__table thead th {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b6bcc3;
    padding-top: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

/* The team is the row's label: anchored left, on a share of the width rather
   than all of the leftovers. The stat columns split what remains. */
.pl-teams__table th:first-child,
.pl-teams__table td:first-child {
    width: 34%;
    text-align: left;
    padding-left: 0;
}

.pl-teams__table tbody th {
    font-size: 0.85rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-teams__table tbody tr + tr th,
.pl-teams__table tbody tr + tr td {
    border-top: 1px solid #f4f6f7;
}

.pl-teams__table tbody th a {
    color: #111111;
    text-decoration: none;
}

.pl-teams__table tbody th a:hover {
    text-decoration: underline;
}

.pl-teams__table tbody td {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #6b7280;
}

.pl-teams__apps {
    font-weight: 600;
    color: #111111 !important;
}

.pl-teams__nil {
    color: #dde1e5;
}

/* Gold on this card means a milestone or an award. A booking is not either of
   those, so yellows sit at the same weight as every other number and only a
   red — rare enough to be worth spotting — carries colour. */
.pl-teams__red {
    color: #c2536a;
}

@media (max-width: 420px) {
    .pl-teams__table th,
    .pl-teams__table td {
        padding-left: 0.3rem;
    }

    .pl-teams__table th:first-child,
    .pl-teams__table td:first-child {
        width: 30%;
    }

    .pl-teams__table tbody th {
        font-size: 0.8rem;
    }

    .pl-teams__table tbody td {
        font-size: 0.72rem;
    }

    /* Seven columns is the worst a player can manage — goals, clean sheets and
       both colours of card. At that width "GOALS" fills its column exactly, so
       the headings need a hair taken off them to keep a gap between. */
    .pl-teams__table thead th {
        font-size: 0.53rem;
        letter-spacing: 0.08em;
    }
}

/* --- next milestone ----------------------------------------------------- */

.pl-next {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.15rem 0 1rem;
}

.pl-next__text {
    font-size: 0.98rem;
    color: #111111;
}

.pl-next__text strong {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: #b8811a;
}

.pl-card__foot {
    display: flex;
    justify-content: space-between;
    padding-top: 0.9rem;
    border-top: 1px solid #e9ecef;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c2c8ce;
}



/* --- played alongside --------------------------------------------------- */

.pl-mates {
    padding: 1.15rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-mates__label {
    display: block;
    margin: 0 0 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-mates__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.pl-mate {
    display: grid;
    grid-template-columns: 1fr auto 2.5rem;
    gap: 0.6rem;
    align-items: baseline;
}

.pl-mate__name {
    font-size: 0.85rem;
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-mate__name:hover {
    text-decoration: underline;
}

.pl-mate__years {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #c2c8ce;
    font-variant-numeric: tabular-nums;
}

.pl-mate__num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

.pl-mates__total {
    margin: 0.75rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: #9aa3ad;
}

@media (max-width: 420px) {
    .pl-mate {
        grid-template-columns: 1fr auto 2.2rem;
        gap: 0.45rem;
    }

    .pl-mate__years {
        font-size: 0.62rem;
    }
}

/* --- club awards -------------------------------------------------------- */

.pl-honours {
    padding: 1.15rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-honours__label {
    display: block;
    margin: 0 0 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-honours__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.pl-honour {
    display: grid;
    grid-template-columns: 4.4rem 1fr;
    gap: 0.6rem;
    align-items: baseline;
}

.pl-honour__season {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #b8811a;
    font-variant-numeric: tabular-nums;
}

.pl-honour__name {
    font-size: 0.85rem;
    line-height: 1.3;
    color: #111111;
}

.pl-honour__note {
    margin-left: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa3ad;
    white-space: nowrap;
}

/* --- career span -------------------------------------------------------- */

.pl-span {
    padding: 0 0 1.15rem;
    border-bottom: 1px solid #e9ecef;
}

.pl-span__label {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-span__dates {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: #111111;
    font-variant-numeric: tabular-nums;
}

.pl-span__arrow {
    margin: 0 0.3rem;
    color: #c2c8ce;
}

.pl-span__length {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.pl-span__note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #b8811a;
}

/* --- the season on screen ----------------------------------------------- */

.pl-season {
    padding: 1.15rem 0;
    border-bottom: 1px solid #e9ecef;
}

.pl-season__label {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9aa3ad;
}

.pl-season__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.pl-season__row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: baseline;
}

.pl-season__team {
    font-size: 0.85rem;
    color: #111111;
}

.pl-season__figures {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .pl-season__row {
        grid-template-columns: 4.2rem minmax(0, 1fr);
    }

    .pl-span__dates {
        font-size: 0.8rem;
    }
}