/* Brand maroon, shared by the roster heading, athlete names and banners. */
.roster-header,
.athlete-detail-back {
    color: #710a2c;
    font-family: Muli, sans-serif;
}

.roster-header {
    font-weight: bold;
}

    .roster-header a,
    .athlete-detail-back:hover {
        color: inherit;
    }

/* Small blue Edit button pinned to the top right of the module. Styled here rather than with
   Bootstrap classes so it looks the same whatever the page skin loads. Editing the roster is
   also where athlete photos are uploaded. */
/* Buttons above the roster heading. Laid out as a flex row rather than floated: the athlete
   rows are flex containers, which do not overlap floats and shrink away from them instead. */
.roster-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    /* Breathing room above the controls. Sits on the toolbar itself, which only renders for
       users who may manage the roster, so nobody else picks up the extra space. */
    padding-top: .75rem;
    margin-bottom: .5rem;
}

/* Sport picker, matching the outline weight of the Manage Rosters button beside it. */
.roster-sport-picker {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    font-family: Muli, sans-serif;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    overflow: hidden;
}

    .roster-sport-picker > span {
        display: flex;
        align-items: center;
        padding: .2rem .6rem;
        background-color: #0d6efd;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.roster-sport-select {
    border: 0;
    outline: 0;
    padding: .2rem 1.5rem .2rem .5rem;
    background-color: #fff;
    color: #0d6efd;
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
    max-width: 12rem;
    cursor: pointer;
}

.roster-edit-btn {
    display: inline-block;
    margin: 0;
    padding: .2rem .75rem;
    background-color: #0d6efd;
    color: #fff !important;
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    border-radius: 4px;
    text-decoration: none;
}

    .roster-edit-btn:hover,
    .roster-edit-btn:focus {
        background-color: #0b5ed7;
        color: #fff !important;
        text-decoration: none;
    }

/* Secondary blue button beside Edit, opening the roster list. */
.roster-manage-btn {
    display: inline-block;
    margin: 0;
    padding: .2rem .75rem;
    background-color: #fff;
    color: #0d6efd !important;
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    text-decoration: none;
}

    .roster-manage-btn:hover,
    .roster-manage-btn:focus {
        background-color: #e7f1ff;
        color: #0b5ed7 !important;
        text-decoration: none;
    }

/* ---------------------------------------------------------------------------
   Shared buttons for the admin pages (View Rosters, Create Roster). The skin
   loads no Bootstrap, so these are defined here; rbtn is used rather than btn
   to avoid colliding with DNN's own chrome.
   --------------------------------------------------------------------------- */
.rbtn {
    display: inline-block;
    padding: .3rem .85rem;
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .rbtn:hover,
    .rbtn:focus {
        text-decoration: none;
        filter: brightness(.92);
    }

.rbtn-lg {
    padding: .45rem 1.25rem;
    font-size: 16px;
}

.rbtn-primary {
    background-color: #0d6efd;
    color: #fff !important;
}

.rbtn-secondary {
    background-color: #fff;
    color: #0d6efd !important;
    border-color: #0d6efd;
}

.rbtn-maroon {
    background-color: #710a2c;
    color: #fff !important;
}

.rbtn-danger {
    background-color: #b3001b;
    color: #fff !important;
}

.rbtn-quiet {
    background-color: #fff;
    color: #444 !important;
    border-color: #bbb;
}

/* Square button holding only an icon. */
.rbtn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
}

.rbtn .arrow {
    font-weight: bold;
    margin-right: .35rem;
}

/* ---------------------------------------------------------------------------
   View Rosters page: one collapsible group per school year.
   --------------------------------------------------------------------------- */
.rosters-page {
    font-family: Muli, sans-serif;
}

.rosters-top {
    margin-bottom: 1rem;
}

.rosters-empty {
    color: #666;
    font-style: italic;
}

.year-group {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: .75rem;
    background-color: #fff;
}

.year-group-summary {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .6rem .9rem;
    background-color: #710a2c;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    list-style: none;
}

    /* Replace the default triangle with one that follows the open state. */
    .year-group-summary::-webkit-details-marker {
        display: none;
    }

    .year-group-summary::before {
        content: "\25B8";
        display: inline-block;
        font-size: 15px;
        transition: transform .15s ease;
    }

.year-group[open] > .year-group-summary::before {
    transform: rotate(90deg);
}

.year-group-title {
    font-size: 18px;
    font-weight: bold;
}

.year-group-count {
    font-size: 13px;
    opacity: .85;
}

/* A wide table scrolls inside its own box rather than widening the page. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rosters-table {
    width: 100%;
    border-collapse: collapse;
}

    .rosters-table th {
        text-align: left;
        padding: .5rem .9rem;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #710a2c;
        border-bottom: 1px solid #e0e0e0;
    }

    .rosters-table td {
        padding: .55rem .9rem;
        vertical-align: middle;
        border-bottom: 1px solid #eee;
    }

    .rosters-table tr.current {
        background-color: #f7f2f4;
    }

.roster-sport {
    font-weight: bold;
}

.current-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .5rem;
    background-color: #710a2c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Actions spaced apart, with delete always pushed to the far right of the row. */
/* No min-width here: 22rem forced the table wider than a phone viewport and pushed the whole
   page into horizontal scroll. The buttons wrap instead, and the table scrolls on its own. */
.rosters-actions-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

    .rosters-actions-cell .delete-roster {
        margin-left: auto;
    }

.year-form {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.year-input {
    width: 5.5rem;
    padding: .2rem .4rem;
    font-family: Muli, sans-serif;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.rosters-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

/* ---------------------------------------------------------------------------
   Create Roster page, sharing the roster list's typography and buttons.
   --------------------------------------------------------------------------- */
.create-form {
    max-width: 34rem;
}

.create-field {
    margin-bottom: 1.25rem;
}

    .create-field > label {
        display: block;
        margin-bottom: .3rem;
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #710a2c;
    }

    .create-field .required {
        color: #666;
        font-weight: normal;
        text-transform: none;
        letter-spacing: 0;
    }

.create-input,
.create-field select,
.create-field input[type="file"] {
    width: 100%;
    padding: .35rem .5rem;
    font-family: Muli, sans-serif;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

    .create-input:focus,
    .create-field select:focus {
        outline: 0;
        border-color: #710a2c;
    }

.create-help {
    margin: .35rem 0 0;
    font-size: 13px;
    color: #666;
}

.create-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.rosters-page .errors {
    margin: 0 0 1rem;
    padding: .75rem 1rem .75rem 2rem;
    background-color: #fdf2f3;
    border: 1px solid #f0c2c8;
    border-radius: 4px;
    color: #b3001b;
}

/* Roster row: photo on the left, then the athlete's details, number flush right. */
.roster-athlete {
    display: flex;
    align-items: center;
    color: black;
    border-bottom: 1px solid #ccc;
    padding: .5rem 0;
}

    .roster-athlete:nth-child(even) {
        background-color: #f2f2f2;
    }

    .roster-athlete .roster-athlete-photo {
        flex: 0 0 auto;
        /* Gap between the photo and the athlete's name. */
        margin-right: 1rem;
        line-height: 0;
    }

    .roster-athlete img {
        /* 3:4 aspect ratio*/
        width: 84px;
        height: 112px;
        /* Crop photos that are not 3:4 instead of stretching them, which reads as blurry. */
        object-fit: cover;
        object-position: top center;
        border: 2px solid #710a2c;
        border-radius: 4px;
    }

    .roster-athlete .roster-athlete-info {
        min-width: 0;
    }

    .roster-athlete .name {
        display: block;
        font-family: Muli, sans-serif;
        font-size: 20.8px;
        font-weight: bold;
        color: #710a2c;
        text-transform: uppercase;
    }

        .roster-athlete .name:hover {
            text-decoration: none;
        }

    /* Position sits directly under the name, defaulting to "Player" in the view. */
    .roster-athlete .position {
        font-family: Muli, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: black;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .roster-athlete .details {
        font-family: Muli, sans-serif;
        font-size: 17.6px;
        color: black;
        margin-top: .25rem;
    }

        /* Keep the slashes from crowding the values on either side. */
        .roster-athlete .details .sep {
            margin: 0 .25rem;
        }

    /* Jersey number flush against the right edge of the row. Wider than a true half circle so
       two digits sit on the flat part rather than running into the curve. */
    .roster-athlete .no {
        flex: 0 0 auto;
        margin-left: auto;
        width: 104px;
        height: 108px;
        border-radius: 108px 0 0 108px;
        background-color: #710a2c;
        color: white;
        font-family: Muli, sans-serif;
        font-size: 26px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Nudge the digits off the curved edge toward the flat side. */
        padding-left: .75rem;
    }

        /* One inline run, so the hash and the digits share a baseline automatically. */
        .roster-athlete .no .no-inner {
            display: inline-block;
        }

        /* Paired with a number the # is a marker: smaller, and sitting on the number's baseline. */
        .roster-athlete .no .hash {
            font-size: .68em;
            font-weight: bold;
            opacity: .85;
            margin-right: .06em;
            vertical-align: baseline;
        }

        /* With no number to pair with, the # is the whole badge, so it takes the full size. */
        .roster-athlete .no-hash-only .hash {
            font-size: 1em;
            opacity: 1;
            margin-right: 0;
        }

    @media (max-width: 575px) {
        .roster-athlete .no {
            width: 74px;
            height: 84px;
            border-radius: 84px 0 0 84px;
            font-size: 21px;
        }
    }

/* ---------------------------------------------------------------------------
   Individual athlete page. Uses its own athlete-detail-* classes so the older
   .athlete rules, which the roster edit screen still depends on, are untouched.
   --------------------------------------------------------------------------- */
.athlete-detail-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* Back to the roster, as a button rather than a bare link. */
.athlete-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    background-color: #710a2c;
    color: #fff !important;
    font-family: Muli, sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
}

    .athlete-detail-back:hover,
    .athlete-detail-back:focus {
        background-color: #55071f;
        color: #fff !important;
        text-decoration: none;
    }

    .athlete-detail-back .arrow {
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        /* Optically centre the chevron against the cap height of the label. */
        margin-top: -1px;
    }

    .athlete-detail-back:hover .arrow {
        transform: translateX(-2px);
    }

.athlete-detail {
    font-family: Muli, sans-serif;
    color: black;
}

/* Maroon banner: number, then name with position and class beneath it. */
.athlete-detail-banner {
    display: flex;
    align-items: stretch;
    background-color: #710a2c;
    color: white;
    border-radius: 4px 4px 0 0;
}

.athlete-detail-no {
    flex: 0 0 auto;
    min-width: 68px;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, .18);
    border-radius: 4px 0 0 0;
}

.athlete-detail-heading {
    padding: .6rem 1.25rem;
    min-width: 0;
}

.athlete-detail-name {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
}

.athlete-detail-sub {
    font-size: 17.6px;
    text-transform: uppercase;
    opacity: .9;
}

    .athlete-detail-sub .sep {
        margin: 0 .35rem;
    }

/* Photo beside the facts, both dropping to a single column on narrow screens. */
.athlete-detail-body {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #ddd;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.athlete-detail-photo {
    flex: 0 0 auto;
    width: 168px;
    height: 224px;
    object-fit: cover;
    object-position: top center;
    border: 3px solid #710a2c;
    border-radius: 4px;
}

/* Exactly two columns, so the pairs are fixed: Hometown / High School on one line and
   Major / Workstation on the next. auto-fit previously allowed a third column on wide
   screens, which broke those pairings. */
.athlete-detail-facts {
    flex: 1 1 320px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 0;
    align-content: start;
}

@media (max-width: 575px) {
    .athlete-detail-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

    .athlete-detail-facts .fact {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .45rem 0;
        border-bottom: 1px solid #e6e6e6;
    }

    .athlete-detail-facts dt {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: #710a2c;
        margin: 0;
    }

    .athlete-detail-facts dd {
        font-size: 17.6px;
        text-align: right;
        margin: 0;
    }

/* Athlete picker, styled to sit alongside the back button. */
.athlete-picker {
    display: inline-flex;
    align-items: stretch;
    font-family: Muli, sans-serif;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #710a2c;
}

    .athlete-picker label {
        display: flex;
        align-items: center;
        margin: 0;
        padding: .35rem .75rem;
        background-color: #710a2c;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .athlete-picker .athlete-selector {
        border: 0;
        outline: 0;
        padding: .35rem 2rem .35rem .6rem;
        background-color: #fff;
        color: black;
        font-family: Muli, sans-serif;
        font-size: 16px;
        max-width: 15rem;
    }

/* Bio always renders, so the page keeps a consistent shape and the section has room. */
.athlete-detail-bio {
    font-size: 17.6px;
    line-height: 1.55;
    margin-top: 1.75rem;
    padding: 1.25rem;
    min-height: 9rem;
    background-color: #faf8f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

    .athlete-detail-bio-empty {
        color: #666;
        font-style: italic;
    }

    .athlete-detail-bio h2 {
        font-size: 20.8px;
        font-weight: bold;
        color: #710a2c;
        text-transform: uppercase;
        margin: 0;
    }


@media (max-width: 575px) {
    .athlete-detail-name {
        font-size: 22px;
    }

    .athlete-detail-no {
        min-width: 54px;
        font-size: 24px;
    }

    .athlete-detail-photo {
        width: 126px;
        height: 168px;
    }
}

.width-dynamic {
    padding: 0 3px;
}

.delete-btn {
    margin-left: auto;
    margin-right: 1rem;
    height: 2rem;
    line-height: 2rem!important;
    margin-top: 1rem;
    padding: 0 .5rem!important;
}

#selected-roster, .selected-athlete-input-group {
    padding: 2px 5px;
}

.selected-athlete-input-group {
    margin-bottom: 1rem;
    width: auto !important;
}

.clear {
    clear: both !important;
}

/* ---------------------------------------------------------------------------
   Roster edit screen. The markup carries Bootstrap utility and grid classes
   (d-flex, col-lg-6, ml-auto, form-control), but the site skin does not load
   Bootstrap, so none of them do anything. The layout is defined here instead;
   without it every field stacks into one long scattered column.
   --------------------------------------------------------------------------- */
.athlete {
    font-family: Muli, sans-serif;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: .75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* Photo in a fixed left column, bar and fields stacked to its right. */
/* The maroon bar is a full width header carrying the photo and the quick fields; the rest of
   the athlete's details sit beneath it when the row is expanded. */
.athlete-card > .clear {
    display: none;
}

.athlete-card > ul {
    margin-top: .6rem;
}

.athlete-bar {
    background-color: #710a2c;
    color: white;
    border-radius: 4px;
    padding: .5rem .75rem;
}

/* Each row fades from darker maroon on the left to lighter on the right; consecutive rows stay
   in two distinct hues so they are still easy to tell apart while scanning. The flat colour is
   kept as a fallback for anything that does not render the gradient. */
#roster-athletes > .athlete:nth-child(odd) .athlete-bar {
    background-color: #4a0619;
    background-image: linear-gradient(90deg, #4a0619 0%, #7a1234 100%);
}

#roster-athletes > .athlete:nth-child(even) .athlete-bar {
    background-color: #6d1531;
    background-image: linear-gradient(90deg, #6d1531 0%, #9c2a4d 100%);
}

    .athlete-bar > div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem 1rem;
        cursor: pointer;
        min-height: 3rem;
    }

/* Trash and chevron, pinned to the end of the bar and centred against the row's height
   rather than sitting level with the top of the taller fields beside them. */
.athlete-bar-end {
    display: flex;
    align-items: center;
    align-self: center;
    gap: .5rem;
    margin-left: auto;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(255, 255, 255, .14);
    cursor: pointer;
    text-decoration: none;
}

    .icon-btn:hover,
    .icon-btn:focus {
        background-color: #b3001b;
        color: #fff;
        text-decoration: none;
    }

.expand-chevron {
    display: inline-flex;
    align-items: center;
    color: #fff;
    opacity: .85;
    transition: transform .15s ease;
}

/* Rows start collapsed; the chevron points down when there is more to show and
   flips once the row is open. */
.athlete:not(.collapsed) .expand-chevron {
    transform: rotate(180deg);
}

.athlete-name {
    flex: 1 1 12rem;
    font-size: 20.8px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.25;
    min-width: 0;
}

/* Small caps label sitting above each inline field on the maroon bar. */
.quick-edit-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    margin-bottom: .15rem;
}

/* Bootstrap's ml-auto is used to push the delete button to the end of the bar. */
.athlete-bar .ml-auto {
    margin-left: auto;
}

/* Field grid: label and input on one line, two columns where there is room. */
/* 240px rather than 270px: at 270 the single column was wider than a narrow phone viewport
   once the card and page padding were taken off, which overflowed instead of wrapping. */
.athlete ul.collapsible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1.5rem;
}

.athlete-no {
    background: white;
    color: black;
    padding: 0 1rem;
    font-weight: bold;
}

/* Buttons on the edit screen. Bootstrap's btn classes are inert on this skin, so the module
   gives its own buttons a look; scoped to the module's own wrappers so the surrounding DNN
   and skin chrome is left alone. */
.roster-edit-toolbar,
.roster-edit-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0;
}

.roster-edit-toolbar {
    justify-content: flex-end;
}

.roster-edit-actions-end {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.roster-edit-toolbar .btn,
.roster-edit-actions .btn,
.athlete .delete-btn {
    display: inline-block;
    padding: .3rem .9rem;
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff !important;
    background-color: #6c757d;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

    .roster-edit-toolbar .btn-success {
        background-color: #157347;
    }

/* Full width outline button closing the roster, above the Delete/Cancel/Submit row. */
.add-athlete-btn {
    display: block;
    width: 100%;
    margin: 1rem 0 0;
    padding: .6rem 1rem;
    background-color: #fff;
    color: #710a2c;
    font-family: Muli, sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #710a2c;
    border-radius: 4px;
    cursor: pointer;
}

    .add-athlete-btn:hover,
    .add-athlete-btn:focus {
        background-color: #710a2c;
        color: #fff;
    }

/* A newly added athlete, not yet saved. */
.athlete-new {
    border-color: #710a2c;
    box-shadow: 0 0 0 2px rgba(113, 10, 44, .12);
}

    /* No athlete id exists yet, so there is nothing to upload a photo against. */
    .photo-pending {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .photo-pending-note {
        width: 100%;
        padding: .2rem;
        background-color: rgba(113, 10, 44, .85);
        color: #fff;
        font-size: .7rem;
        font-weight: bold;
        line-height: 1.2;
    }

    /* The generic "Change photo" strip would otherwise sit on top of the note above. */
    .photo-pending::after {
        content: none;
    }

/* Save / Discard row closing an unsaved athlete. */
.new-athlete-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid #e6e6e6;
}

.new-athlete-status {
    margin-right: auto;
    font-size: 14px;
    color: #666;
}

    .new-athlete-status.is-error {
        color: #b3001b;
        font-weight: bold;
    }

.new-athlete-tag {
    padding: .1rem .55rem;
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
}

    .roster-edit-actions .btn-primary {
        background-color: #0d6efd;
    }

    /* Cancel is a quiet outline button here too, matching the Cancel on Create Roster and the
       Back button on the roster list. Values kept in step with .rbtn-quiet. */
    /* Full border shorthand, not just border-color: the shared .btn rule above sets border: 0,
       so a colour on its own has no width or style to show. */
    .roster-edit-actions .btn-secondary {
        background-color: #fff;
        color: #444 !important;
        border: 1px solid #bbb;
    }

    .roster-edit-actions .btn-danger,
    .athlete .delete-btn {
        background-color: #b3001b;
    }

.athlete .delete-btn {
    padding: .15rem .6rem;
    font-size: 13px;
    margin-left: .5rem;
}

/* Only the roster edit screen still uses this class, where the photo is a flex item inside the
   maroon header. The old float and negative margin belonged to the previous floated layout and
   would drag the tile out of alignment here. */
.athlete-img {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 4px;
}

/* Number and position, edited inline on the athlete bar of the edit screen. */
.quick-edit {
    flex: 0 0 auto;
    padding: 0 .4rem;
}

    .athlete .quick-edit .form-control {
        height: 1.75rem;
        padding: 0 .4rem;
        color: black;
        font-size: 1rem;
        display: inline-block;
    }

.athlete .quick-edit-no {
    width: 4rem;
    text-align: center;
    font-weight: bold;
}

.athlete .quick-edit-position {
    width: 9rem;
}

@media (max-width: 767px) {
    .athlete .quick-edit-no {
        width: 3rem;
    }

    .athlete .quick-edit-position {
        width: 6rem;
    }
}

.athlete li {
    padding: 0;
    list-style: none;
}

.athlete ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 991px) {
    .athlete-bar {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .athlete ul {
        padding: 0;
        margin-top: .3rem;
        clear: left;
    }

    .athlete-name {
        line-height: 2rem;
        margin-left: .5rem;
    }

    .athlete-no {
        padding: 0 .5rem;
    }

    /* Slightly smaller photo tile on narrow screens, keeping the 3:4 shape. */
    .photo-upload-container,
    .photo-upload {
        width: 84px;
        height: 112px;
    }
}

.athlete dl, .athlete dd {
    margin-bottom: 0;
}

.athlete dl {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .3rem 0;
    border-bottom: 1px solid #e6e6e6;
}

.athlete dt {
    flex: 0 0 7.5rem;
    font-size: 13px;
    font-weight: bold;
    color: #710a2c;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0;
}

    .athlete dt::after {
        content: ':';
    }

.athlete dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

a:hover {
    text-decoration: none !important;
}

.photo-upload {
    width: 105px;
    height: 140px;
    opacity: 0;
    cursor: pointer;
}

.photo-upload-container {
    display: inline-block;
    flex: 0 0 auto;
    /* content-box on purpose: width/height then describe the area the photo is painted into,
       so it stays an exact 3:4 box and the border sits outside it. With border-box the border
       would eat into the box and letterbox the photo, which reads as pinched. */
    box-sizing: content-box;
    /* contain, not cover: on the edit screen the whole photo must be visible so you can see
       what you are replacing. cover cropped heads off, and a fixed non-3:4 box would squash. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #efeaec;
    border: 2px solid #710a2c;
    border-radius: 4px;
    position: relative;
    /* 3:4, matching the photos themselves, so contain leaves no bars and nothing is squashed. */
    height: 140px;
    width: 105px;
    text-align: center;
    font-size: .8rem;
}

    /* The file input is invisible, so label the tile: without this there was nothing to
       show that clicking a photo is how you replace it. */
    .photo-upload-container::after {
        content: "Change photo";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: .15rem .1rem;
        background-color: rgba(113, 10, 44, .85);
        color: white;
        font-family: Muli, sans-serif;
        font-size: .7rem;
        font-weight: bold;
        border-radius: 0 0 4px 4px;
        pointer-events: none;
    }

    .photo-upload-container:hover {
        outline: 2px solid #710a2c;
        outline-offset: 1px;
    }

    .photo-upload-container .spinner-border {
        position: absolute;
        left: calc(50% - 1rem);
        top: calc(50% - 1rem);
        display: none;
    }

li.col-12.col-md-6 {
    padding: 0 .2rem;
}

/* The skin has no Bootstrap, so form-control is styled here. */
.athlete .form-control,
.athlete select,
.athlete input[type="text"] {
    width: 100%;
    height: 1.9rem;
    color: black;
    padding: 0 .4rem;
    font-family: Muli, sans-serif;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

    .athlete .form-control:focus,
    .athlete select:focus {
        outline: 0;
        border-color: #710a2c;
    }

.athlete textarea.form-control {
    width: 100%;
    height: auto;
    min-height: 5rem;
    padding: .4rem;
}


.collapsed .collapsible {
    display: none!important;
}

.athlete .collapsed hr {
    margin: .2rem 0;
}

.errors {
    color: red;
}

.roster-edit-errors {
    margin: 0 0 1rem;
    padding: .75rem 1rem .75rem 2rem;
    background-color: #fdf2f3;
    border: 1px solid #f0c2c8;
    border-radius: 4px;
    font-family: Muli, sans-serif;
    color: #b3001b;
}

/* ===========================================================================
   Small screen pass. Everything above is laid out with flex and grid that
   already reflow; these rules handle the places where fixed pixel sizes or
   side-by-side label/value pairs stop fitting.
   =========================================================================== */

/* Nothing in the module may widen the page. Long words - a hometown, a major,
   a high school name - wrap instead of pushing the layout out. */
.roster-athlete,
.athlete,
.athlete-detail,
.rosters-page {
    max-width: 100%;
}

    .roster-athlete .name,
    .roster-athlete .details,
    .athlete-detail-name,
    .athlete-detail-facts dd,
    .athlete-detail-bio {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

/* --- Roster row ------------------------------------------------------------ */
@media (max-width: 575px) {
    .roster-athlete .roster-athlete-photo {
        margin-right: .6rem;
    }

    .roster-athlete img {
        width: 64px;
        height: 85px;
    }

    .roster-athlete .name {
        font-size: 17.6px;
    }

    .roster-athlete .position {
        font-size: 12px;
    }

    .roster-athlete .details {
        font-size: 15px;
    }
}

/* --- Athlete detail -------------------------------------------------------- */
@media (max-width: 767px) {
    /* Back button and athlete picker each take a full row rather than squeezing. */
    .athlete-detail-top {
        flex-direction: column;
        align-items: stretch;
    }

        .athlete-detail-top .athlete-detail-back {
            justify-content: center;
        }

    .athlete-picker {
        width: 100%;
    }

        .athlete-picker .athlete-selector {
            flex: 1 1 auto;
            max-width: none;
        }
}

@media (max-width: 575px) {
    .athlete-detail-body {
        padding: .9rem;
        gap: .9rem;
    }

    /* Label above value, so neither is crushed into a narrow column. */
    .athlete-detail-facts .fact {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
    }

        .athlete-detail-facts dd {
            text-align: left;
        }
}

/* --- Roster edit ----------------------------------------------------------- */
@media (max-width: 767px) {
    /* The bar's photo, name and quick fields already wrap; centre the trash and
       chevron on their own line instead of leaving them floating right. */
    .athlete-bar-end {
        margin-left: 0;
    }

    .roster-edit-actions-end {
        margin-left: 0;
        width: 100%;
    }

        .roster-edit-actions-end .btn {
            flex: 1 1 auto;
            text-align: center;
        }
}

@media (max-width: 575px) {
    .athlete {
        padding: .5rem;
    }

    /* One column, with each label sitting above its input. */
    .athlete ul.collapsible {
        grid-template-columns: minmax(0, 1fr);
    }

    .athlete dl {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
    }

    .athlete dt {
        flex: 0 0 auto;
    }

    .athlete .quick-edit {
        padding: 0;
    }

        .athlete .quick-edit-position {
            width: 100%;
            min-width: 7rem;
        }
}

/* --- Roster list and create ------------------------------------------------ */
@media (max-width: 575px) {
    .rosters-actions-cell .delete-roster {
        /* Wrapped onto its own line, so pushing it right no longer helps. */
        margin-left: 0;
    }

    .rosters-table th,
    .rosters-table td {
        padding: .45rem .5rem;
    }

    .year-group-summary {
        flex-wrap: wrap;
    }

    .create-actions {
        flex-wrap: wrap;
    }

        .create-actions .rbtn {
            flex: 1 1 auto;
            text-align: center;
        }
}