/* Layout: sidebar nav + main column. Never put footer as a direct flex sibling of nav. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #fff;
}

body > main {
    flex: 1;
    min-width: 0;
}

/* Home (and any page with footer): one column beside nav */
.site-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content > main {
    flex: 1;
}

/* Opponent preview + chemistry insight cards */
.match-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
    margin: 0 1rem 1.25rem;
    max-width: 1100px;
}

.match-insights--home {
    margin: 0 auto;
    max-width: 720px;
    padding: 0 1rem 1rem;
    justify-content: center;
}

.match-insights__empty {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #333;
    border: 1px dashed #228B22;
    border-radius: 8px;
    background: #f4faf4;
    flex: 1;
    min-width: 240px;
}

.home-opponent-strip {
    background: linear-gradient(180deg, #f4faf4 0%, #fff 100%);
    padding: 0.5rem 0 1rem;
}

.insight-card {
    flex: 1;
    min-width: 260px;
    max-width: 520px;
    padding: 1rem 1.15rem;
    border-radius: 10px;
    border: 2px solid #228B22;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 100, 0, 0.08);
}

.insight-card--chemistry {
    margin: 0 1rem 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .insight-card--chemistry {
        max-width: 440px;
        flex: 0 0 auto;
        width: auto;
    }
}

.insight-card--attendance {
    margin: 0 auto 0.75rem;
    max-width: min(900px, calc(100% - 2rem));
    box-sizing: border-box;
}

.attendance-impact-details {
    margin-top: 0.65rem;
}

.stat-spotlight {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.stat-spotlight__item {
    flex: 1 1 140px;
    text-align: center;
    background: #f4faf4;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
}

.stat-spotlight__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b7a4b;
    margin-bottom: 0.25rem;
}

.stat-spotlight__name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #006400;
    line-height: 1.25;
}

.stat-spotlight__value {
    font-size: 0.85rem;
    color: #444;
    margin-top: 0.2rem;
}

.attendance-inline-details {
    display: inline;
}

.attendance-inline-details summary {
    display: inline;
    cursor: pointer;
    color: #006400;
    font-weight: 600;
    list-style: none;
}

.attendance-inline-details summary::-webkit-details-marker {
    display: none;
}

.attendance-inline-details summary::before {
    content: "▶ ";
    font-size: 0.7em;
}

.attendance-inline-details[open] summary::before {
    content: "▼ ";
}

.attendance-impact-details summary {
    cursor: pointer;
    color: #006400;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Scrolls on its own (both ways) so the header row can stick to the top of
   it — sticky needs its scroll container to be the thing that scrolls, and
   overflow-x: auto alone would make this box the container without it ever
   scrolling vertically. */
.attendance-impact-table-wrap {
    overflow: auto;
    max-height: 70vh;
    margin-top: 0.5rem;
}

.attendance-impact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .attendance-impact-table {
        font-size: 0.78rem;
    }

    .attendance-impact-table th,
    .attendance-impact-table td {
        padding: 0.3rem 0.3rem;
    }
}

.attendance-impact-table th,
.attendance-impact-table td {
    padding: 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid #e2ede2;
}

.attendance-impact-table th:first-child,
.attendance-impact-table td:first-child {
    text-align: left;
}

/* Divider between the "Present" and "Missed" column groups. */
.attendance-impact-table th:nth-child(5),
.attendance-impact-table td:nth-child(5) {
    border-left: 2px solid #9cc79c;
}

.attendance-impact-table thead th {
    color: #006400;
    font-weight: 600;
    background: #f4faf4;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Collapsed borders don't travel with sticky cells, so draw the underline here. */
    box-shadow: inset 0 -1px 0 #c9dfc9;
}

.attendance-impact-table tbody tr:hover {
    background: #f4faf4;
}

.insight-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: #006400;
    letter-spacing: 0.02em;
}

.insight-card__subtitle {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0d4d0d;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.insight-card__subtitle:first-of-type {
    margin-top: 0;
}

.insight-card__opponent {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.insight-card__meta {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    color: #444;
}

.insight-card__hint {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: #555;
}

.insight-card__body {
    margin: 0;
    line-height: 1.45;
}

/* Team connections card: mini avatars + names (match chemistry table feel) */
.insight-card__connection-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.insight-card__player-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
}

.insight-card__player-chip__img {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 1px solid rgba(34, 139, 34, 0.28);
}

.insight-card__explainer {
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #444;
    background: #f4faf4;
    border-radius: 6px;
    border-left: 3px solid #228B22;
}

.insight-card__explainer code {
    font-size: 0.88em;
    word-break: break-word;
}

.insight-card__footer {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

.insight-card__footer a {
    color: #006400;
    font-weight: 600;
}

/* Standings table (standings.php) — same grid-table pattern as
   #player-total-stats (statistics page): a real <table> with display:grid
   rows so columns line up without JS, green header, zebra striping, hover.
   Fixed-width columns (not fr units) on purpose: the table has a real
   natural width (890px, including PTS), and on anything too narrow to fit
   that, #standings-table-container scrolls horizontally instead of
   squeezing/hiding columns — same behavior as the actual ACSA site's own
   table. The container sizes itself to the table (max-content) and only
   caps at the window width, so adding a column never leaves it scrolling
   on a desktop that has room — a fixed max-width (950px) did exactly that
   once the "Our W-D-L" column pushed the table past it. */
#standings-table-container {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Without this, rubber-band/bounce overscroll (trackpad or touch) lets
       you scroll a hair past the true left/right edge, and the sticky #/
       Team columns don't perfectly track that elastic overshoot — showing
       a sliver of the next scrolling column bleeding through on the wrong
       side. Contain the scroll to its real bounds so that can't happen. */
    overscroll-behavior-x: contain;
}

.standings-empty {
    text-align: center;
    margin: 40px 0;
    font-size: 1.1rem;
    color: #555;
}

#standings-table {
    display: flex;
    flex-direction: column;
    width: max-content;
    border: 0;
    border-spacing: 0;
    font-size: 1rem;
}

#standings-table thead,
#standings-table tbody {
    display: block;
    width: max-content;
}

#standings-table thead tr,
#standings-table tbody tr {
    display: grid;
    width: max-content;
    /* Last column: "Our W-D-L" (our all-time record vs that team). */
    grid-template-columns: 40px 200px 50px 50px 50px 55px 55px 55px 55px 55px 65px 160px 95px;
    box-sizing: border-box;
}

#standings-table th {
    background-color: #228B22;
    color: white;
    border: 2px solid white;
    padding: 0.45rem 0.35rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    white-space: nowrap;
}

#standings-table td {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.35rem;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.95rem;
}

/* # and Team stay put while the stat columns scroll underneath — the
   header's own green background (#standings-table th, higher specificity
   via id+tag) still wins there, so only the body cells need an explicit
   background here to stay opaque over the scrolling content behind them. */
.standings-table__rank-col,
.standings-table__team-col {
    position: sticky;
    z-index: 2;
    background-color: #fff;
}

.standings-table__rank-col {
    left: 0;
}

.standings-table__team-col {
    left: 40px;
    justify-content: flex-start !important;
    gap: 8px;
    text-align: left;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.12);
}

.standings-table__team-col span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standings-table__logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.standings-table__last5 {
    gap: 3px;
}

.standings-last5__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.standings-last5__pill--win {
    background-color: #2e9e3f;
}

.standings-last5__pill--draw {
    background-color: #9a9a9a;
}

.standings-last5__pill--lose {
    background-color: #d9453d;
}

#standings-table tbody tr:nth-child(odd) {
    background-color: #ddffdd;
}

#standings-table tbody tr:nth-child(odd) .standings-table__rank-col,
#standings-table tbody tr:nth-child(odd) .standings-table__team-col {
    background-color: #ddffdd;
}

/* Salsa Verde's own row, highlighted regardless of striping. No hover
   state on any row here — nothing in this table is clickable. */
.standings-table__row--us {
    background-color: #0B7A3B !important;
    color: #fff;
    font-weight: 700;
}

.standings-table__row--us .standings-table__rank-col,
.standings-table__row--us .standings-table__team-col {
    background-color: #0B7A3B !important;
    color: #fff;
}

@media (max-width: 700px) {
    /* The container's own left/right padding created a gap between the
       viewport edge and where the sticky columns actually stick (sticky
       sticks to the *padding* edge, not the true container edge) — nothing
       opaque covered that gap, so scrolling content not yet fully cleared
       showed through there. Removing padding on mobile (where scrolling
       actually happens) closes that gap entirely; desktop keeps its
       padding since it never needs to scroll. */
    #standings-table-container {
        padding: 0;
    }

    #standings-table th,
    #standings-table td {
        font-size: 0.8rem;
        padding: 0.4rem 0.25rem;
    }

    /* Team column width here is deliberate: 150px is the smallest that
       fits every real team name this season on one line at 0.72rem with no
       truncation ("The Vicious Turtles" is the longest, measuring ~107px
       of text at that size) — teams are fixed for the season, so this
       isn't guesswork that could break later. */
    #standings-table thead tr,
    #standings-table tbody tr {
        grid-template-columns: 32px 150px 40px 40px 40px 44px 44px 44px 44px 44px 55px 130px 82px;
    }

    .standings-table__rank-col {
        left: 0;
    }

    .standings-table__team-col {
        left: 32px;
    }

    .standings-table__team-col span {
        font-size: 0.72rem;
        overflow: visible;
        white-space: nowrap;
    }

    .standings-table__logo {
        width: 20px;
        height: 20px;
    }
}

/* Weekly lineup (weekly_lineup.php public view + the builder in admin.php) —
   the pitch shows starters only (one circle per slot, same as roster.php's
   pitch). Subs aren't tied to a specific slot at all: anyone marked
   available this week who isn't currently starting is automatically a
   substitute, listed below the pitch with the positions they're eligible
   to cover. */
.wl-subs-section {
    /* .lineup-container (the pitch) gives itself 16px of side padding, but
       this section sits outside it directly in <main> (which has none) —
       without its own padding it runs flush to the viewport edge on mobile. */
    margin-top: 1.25rem;
    padding: 0 16px;
    box-sizing: border-box;
}

.wl-subs-section__title {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    color: #006400;
    /* .wl-subs-list below is capped at 560px and centered, but this section
       itself spans the full width of <main> — on a wide desktop window that
       left the heading sitting well to the left of the (centered, narrower)
       rows under it. */
    text-align: center;
}

/* Full-width stacked rows — matches the squad list on roster.php
   (.roster-list-item) instead of the wrapped-pill layout this used to be,
   which read messy once position tags made some entries much wider than
   others. */
.wl-subs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}

.wl-sub-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fdf8;
    border: 1px solid #dcfce7;
    border-radius: 12px;
}

.wl-sub-card__img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #228b22;
    flex-shrink: 0;
    background: #1a6b1a;
}

.wl-sub-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: #145214;
    flex-shrink: 0;
}

/* Position badges reused everywhere a player is listed — same priority-tag
   data as the old Manage Lineup screen, just surfaced here too. */
.wl-positions {
    font-size: 0.72rem;
    font-weight: 700;
    color: #145214;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-chip__positions {
    display: block;
    font-size: 0.62rem;
    opacity: 0.85;
    font-weight: 400;
}

.wl-game-header {
    text-align: center;
    margin: 0 0 1.25rem;
    padding: 0 16px;
    box-sizing: border-box;
}

.wl-game-header__opponent {
    font-size: 1.4rem;
    font-weight: 700;
    color: #006400;
}

.wl-game-header__meta {
    font-size: 0.95rem;
    color: #444;
    margin-top: 0.2rem;
}

/* Weekly lineup admin builder (admin.php) */
.wl-admin-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 1.25rem;
}

.wl-admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.wl-subheading {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #0d4d0d;
}

.wl-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.wl-add-former {
    margin: -0.4rem 0 1rem;
}

.wl-rainout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin-bottom: 1rem;
}

.wl-rainout label {
    font-weight: 700;
    color: #7e22ce;
}

.wl-add-former label {
    display: block;
    font-size: 0.82rem;
    color: #555;
    margin-bottom: 0.3rem;
}

.wl-add-former__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.wl-add-former__row select {
    flex: 1;
    max-width: 320px;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #999;
}

.wl-inactive-pos-wrap {
    margin-top: 0.5rem;
}

.wl-inactive-pos-label {
    display: block;
    font-size: 0.78rem;
    color: #555;
    margin-bottom: 0.3rem;
}

.wl-chip {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 2px solid #228B22;
    background: #fff;
    color: #0d4d0d;
    font-size: 0.85rem;
    cursor: pointer;
}

.wl-chip--active {
    background: #228B22;
    color: #fff;
}

.wl-chip--selected {
    outline: 3px solid #ffb703;
    outline-offset: 1px;
}

.wl-chip--used {
    opacity: 0.4;
    cursor: not-allowed;
}

/* A former player only appears here because they were deliberately added for
   this one game — dashed border + a visible ✕ signal that tapping the chip
   removes them (and puts them back in the "add a former player" picker)
   instead of just toggling availability like a normal roster chip. */
.wl-chip--former {
    border-style: dashed;
}

.wl-chip__remove {
    font-weight: 800;
    margin-right: 0.15rem;
}

.wl-empty-hint {
    font-size: 0.85rem;
    color: #666;
}

.wl-builder {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.wl-pitch-wrap {
    /* .pitch itself is width:100% up to max-width:360px — as a flex item
       with no explicit width of its own, it has nothing concrete to resolve
       that percentage against and collapses toward 0. Give it a real box. */
    flex: 0 0 360px;
    width: 360px;
    max-width: 100%;
}

.wl-assign-panel {
    flex: 1;
    min-width: 220px;
}

.wl-view-link {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #006400;
    font-weight: 600;
    word-break: break-all;
}

/* Homepage schedule (index.php) — replaces the old ACSA iframe with a plain
   styled list sourced from the same synced data the "Up next" card uses, so
   it can't disagree with it. A card-per-game list reads better on mobile
   than a dense table would for just 4 fields, and matches the card-row
   language already used elsewhere on the site (roster list, weekly lineup
   substitutes). */
.schedule-empty {
    text-align: center;
    margin: 20px 0;
    font-size: 1rem;
    color: #555;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.schedule-game {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f8fdf8;
    border: 1px solid #dcfce7;
    border-radius: 12px;
}

.schedule-game--next {
    background: #dcfce7;
    border-color: #228B22;
}

/* Same "rainout" purple ACSA uses for this status, so it's recognizable
   as the same thing rather than a different color meaning something new. */
.schedule-game--rained-out {
    background: #f3f4f6;
    border-color: #d1d5db;
    opacity: 0.75;
}

.schedule-game--rained-out .schedule-game__date {
    background: #9ca3af;
}

.schedule-game--past {
    opacity: 0.6;
}

.schedule-game__rained-out {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #7e22ce;
    padding: 3px 9px;
    border-radius: 6px;
}

.schedule-game__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #228B22;
    color: #fff;
    line-height: 1.1;
}

.schedule-game__weekday {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.schedule-game__day {
    font-size: 1.15rem;
    font-weight: 800;
}

.schedule-game__month {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.schedule-game__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}

.schedule-game__info {
    flex: 1;
    min-width: 0;
}

.schedule-game__opponent {
    font-size: 1rem;
    font-weight: 700;
    color: #145214;
}

/* Time/field used to be one small gray line — bumped up since that's the
   actual point of a schedule and it read as an afterthought before. */
.schedule-game__time {
    font-size: 0.95rem;
    font-weight: 700;
    color: #145214;
    margin-top: 2px;
}

.schedule-game__field {
    font-size: 0.8rem;
    color: #666;
}

.schedule-game__weather {
    font-size: 0.8rem;
    color: #444;
    margin-top: 2px;
}

.schedule-game__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.schedule-game__badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: #228B22;
    padding: 3px 9px;
    border-radius: 999px;
}

.schedule-game__cal {
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0.7;
}

.schedule-game__cal:hover {
    opacity: 1;
}

.schedule-add-all {
    text-align: center;
    margin: 0 16px 14px;
    font-size: 0.9rem;
}

.schedule-add-all a {
    color: #006400;
    font-weight: 600;
    text-decoration: none;
}

.schedule-backup-link {
    text-align: center;
    margin: 14px 16px 0;
    font-size: 0.9rem;
}

.schedule-backup-link a {
    color: #006400;
    font-weight: 600;
}

/* "Up next" card for a rained-out game: a purple strip across the top in
   place of the "Up next" title (same purple as the schedule's rainout
   badge), the date/time struck through, and everything else faded but
   still readable. */
.insight-card--rained-out {
    position: relative;
    overflow: hidden;
    padding-top: 4.3rem !important;
}

.insight-card--rained-out .insight-card__title {
    display: none;
}

.insight-card--rained-out > :not(.insight-card__rained-out) {
    opacity: 0.45;
}

.insight-card__rained-out {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3.1rem;
    z-index: 2;
    pointer-events: none;
}

.insight-card__rained-out span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #7e22ce;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.insight-card__struck {
    text-decoration: line-through;
    text-decoration-color: #7e22ce;
    text-decoration-thickness: 3px;
}

/* Stats page "Weather patterns" (weather_insights_lib.php): collapsed card,
   one row per perfect record with a button that applies its filters. */
.weather-patterns {
    margin: 10px auto 30px;
    max-width: 720px;
}

.weather-patterns > summary {
    cursor: pointer;
}

.weather-patterns__heading {
    margin: 1rem 0 0.4rem;
    font-size: 0.95rem;
    color: #0d4d0d;
}

.weather-patterns__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weather-patterns__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2ede2;
    font-size: 0.95rem;
}

.weather-patterns__what {
    flex: 1 1 200px;
    font-weight: 600;
    color: #222;
}

.weather-patterns__record {
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    min-width: 3.6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.weather-patterns__record--wins {
    background: #dcfce7;
    color: #006400;
}

.weather-patterns__record--losses {
    background: #fee2e2;
    color: #991b1b;
}

.weather-patterns__diff {
    color: #555;
    min-width: 4.5em;
}

.weather-patterns__show {
    font-size: 0.85rem;
    padding: 3px 10px;
    color: #0c630c;
    background: #fff;
    border: 1px solid #228B22;
    border-radius: 5px;
    cursor: pointer;
}

.weather-patterns__show:hover {
    background: #228B22;
    color: #fff;
}

/* Phones: one line per pattern like desktop — pattern (wraps if long),
   goal diff and record lined up in their own columns, and "Show games"
   shrunk to a › arrow button to make it fit. Named areas because the HTML
   order (record before diff) isn't the display order. */
@media (max-width: 640px) {
    .weather-patterns__item {
        display: grid;
        grid-template-columns: 1fr auto auto auto;
        grid-template-areas: "what diff record show";
        gap: 0.45rem;
        align-items: center;
    }

    .weather-patterns__what {
        grid-area: what;
        font-size: 0.85rem;
    }

    .weather-patterns__diff {
        grid-area: diff;
        min-width: 3.4em;
        font-size: 0.78rem;
        text-align: right;
        white-space: nowrap;
    }

    .weather-patterns__record {
        grid-area: record;
    }

    /* Full "Show games" text stays for screen readers (aria-label). */
    .weather-patterns__show {
        grid-area: show;
        font-size: 0;
        width: 1.9rem;
        height: 1.8rem;
        padding: 0;
        line-height: 1;
    }

    .weather-patterns__show::after {
        content: "›";
        font-size: 1.35rem;
        font-weight: 700;
    }
}

/* Resources page: Onion Creek status copied from the league's fields page. */
.field-status-box {
    max-width: 520px;
    margin: 10px 0 0 30px;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: #fff8e1;
    border: 1px solid #f3d27a;
}

.field-status-box__venue {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a5a00;
}

.field-status-box__text {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
}

.field-status-box__meta {
    font-size: 0.85rem;
    color: #555;
}

.field-status-box--closed {
    background: #dc2626;
    border-color: #b91c1c;
}

.field-status-box--closed .field-status-box__venue,
.field-status-box--closed .field-status-box__text,
.field-status-box--closed .field-status-box__meta {
    color: #fff;
}

/* #contact so it outranks the page's green "#contact a" link color. */
#contact .field-status-box--closed a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .field-status-box {
        margin: 10px 0 0;
    }
}

/* Admin login (admin_login.php) and the admin page's sign-out link. */
.admin-login-page {
    background: #f4faf4;
}

.admin-login {
    max-width: 360px;
    margin: 12vh auto 40px;
    padding: 1.75rem 1.5rem;
    background: #fff;
    border: 2px solid #228B22;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 100, 0, 0.12);
    text-align: center;
}

.admin-login__logo {
    width: 64px;
    height: 64px;
    margin-bottom: 0.5rem;
}

.admin-login h1 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: #0c630c;
}

.admin-login form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-align: left;
}

.admin-login label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.admin-login input {
    font-size: 1.05rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #b7d7b7;
    border-radius: 6px;
}

.admin-login button {
    margin-top: 0.5rem;
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: #228B22;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.admin-login button:hover {
    background: #006400;
}

.admin-login__error {
    margin: 0.2rem 0 0;
    color: #b91c1c;
    font-size: 0.9rem;
}

.admin-login__hint,
.admin-login__back {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #555;
}

.admin-login__steps {
    text-align: left;
    font-size: 0.9rem;
    padding-left: 1.2rem;
}

.admin-login__setup {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
}

.admin-hero__logout {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #0c630c;
}

/* Standings page: our all-time record vs teams above/below us, and the
   "vs Us" column. */
.standings-h2h {
    max-width: 520px;
    margin: 20px auto 30px;
}

.standings-table__h2h {
    white-space: nowrap;
    font-weight: 700;
    color: #0c630c;
}