/* The League Manager master's look, after the leagues' own Crossbar sites (www.taybs.org, www.macleague.org): Roboto text,
   Bebas Neue headings, a grey sign-in bar, an accent bar with the league's name, a menu bar with the logo, white rounded
   cards on a pale page, and a white footer over a dark bar. The tenant's colours come from LeagueManager.master as
   --lm-accent / --lm-accent-fg (nav_topbar1_*) and --lm-nav-bg / --lm-nav-fg (nav_topbar2_*); the fallbacks are TAYBS's. */

:root {
    --lm-accent: #FFB81C;
    --lm-accent-fg: #000;
    --lm-nav-bg: #000;
    --lm-nav-fg: #FFF;
    --lm-page: #F6F5FA;
    --lm-line: #E6E9ED;
    --lm-hover: #F5F7FA;
    --lm-heading-font: "Bebas Neue", sans-serif;
    --lm-text-font: Roboto, Arial, sans-serif;
}

/* The page fills the window, so the footer sits at the bottom of a short page. The form carries "all: unset". */
body {
    margin-bottom: 0;
    background-color: #F2F5F7;
    color: #000;
    font-family: var(--lm-text-font);
    --bs-body-font-family: var(--lm-text-font);
    --bs-body-color: #000;
}

#form1 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

#main {
    flex: 1 0 auto;
    background-color: var(--lm-page);
    font-size: 1.125rem;
    line-height: 1.45;
}

/* The first block sits 3rem under the menu bar on every page, whatever top margin the page gives it (taybs.org has 60px) */
#main > .container:first-child {
    margin-top: 3rem !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1220px;
    }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--lm-heading-font);
    font-weight: 400 !important;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

/* A heading with a badge beside it (the names on My Family's cards). The badge is the heading's neighbour, not its
   child, so it keeps the body's type. Bebas Neue's capitals sit above the middle of their line (of a 28px font the
   ascent is 27, the descent 10 and the capitals 20, so they are centred 1.5px high): the heading is padded by twice
   that, and what is centred beside it lines up with the letters, not with the line */
.lm-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.lm-heading-row > :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0;
    padding-top: .11em;
}

#main h1 { font-size: 2.5rem; }
#main h2 { font-size: 1.75rem; }
#main h3 { font-size: 1.375rem; }
#main h4, #main h5, #main h6 { font-size: 1.125rem; }

/* Buttons: black, rounded and in capitals; link-style buttons stay plain */
#main .btn:not(.btn-link) {
    border-radius: 30px;
    padding: 11px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#main .btn-primary, #main .btn-dark {
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-bg: #555;
    --bs-btn-hover-border-color: #555;
    --bs-btn-active-bg: #555;
    --bs-btn-active-border-color: #555;
}

/* Grey pill buttons, for filters and previous/next links. The leagues' sites use #999 on #EFEFEF, which is 2.5:1; #555 is 6.5:1. */
#main .btn.lm-pill {
    background-color: #EFEFEF;
    border: 0;
    color: #555;
}

#main .btn.lm-pill:hover,
#main .btn.lm-pill:focus-visible,
#main .btn.lm-pill.show {
    background-color: #CCC;
    color: #222;
}

/* A page title in two lines: a small line over a large one (Schedule over its month) */
#main h1.lm-kicker {
    font-size: 1.375rem;
    line-height: 1;
}

#main h2.lm-display {
    font-size: 2.75rem;
    line-height: 1.3;
}

/* Schedule's month bar: the month centred between two equal columns, the previous month on the left and, on the right,
   small links and the next month. Each part names its column, so one that is left out doesn't shift the others. */
#main .lm-monthbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
}

#main .lm-monthbar > .lm-pill {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

#main .lm-monthbar > h2 {
    grid-column: 2;
    grid-row: 1;
}

#main .lm-monthbar-end {
    grid-column: 3;
    grid-row: 1;
}

#main .lm-monthbar-end,
#main .lm-monthbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 1rem;
}

/* Schedule: the tag after today's date, in the tenant's accent colours */
#main .lm-today {
    margin-left: 0.5rem;
    padding: 0.3em 0.7em 0.2em;
    border-radius: 30px;
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.04em;
    vertical-align: 0.08em;
}

@media (max-width: 575.98px) {
    #main h2.lm-display {
        font-size: 1.75rem;
    }

    #main .btn.lm-pill {
        padding: 8px 12px;
    }

    /* On a phone the links drop to a line of their own under the month, at the right */
    #main .lm-monthbar-end {
        display: contents;
    }

    #main .lm-monthbar-end > .lm-pill {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    #main .lm-monthbar-links {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 0.25rem;
    }
}

/* Tables: white, with light rules, a pale stripe and a grey heading row; links in black */
#main .table {
    --bs-table-bg: #FFF;
    --bs-table-striped-bg: var(--lm-hover);
    --bs-table-border-color: var(--lm-line);
    font-size: 0.875rem;
}

#main .table > thead > tr > th {
    background-color: var(--lm-hover);
    box-shadow: none;
    color: #555;
    font-weight: 400;
    padding: 8px;
}

#main .table > tbody > tr > td {
    padding: 15px 8px;
    line-height: 1.35;
}

#main .table a {
    color: #000;
    text-decoration-color: rgba(0, 0, 0, 0.35);
}

#main .table a:hover {
    text-decoration-color: #000;
}

/* ---- Header ---- */

.lm-topbar {
    background-color: #F2F5F7;
}

.lm-topbar-links {
    display: flex;
    gap: 25px;
    min-height: 40px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.lm-topbar-links li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lm-topbar-links a {
    color: #000;
    text-decoration: none;
}

.lm-topbar-links a:hover {
    text-decoration: underline;
}

/* A count of waiting notifications: a small red pill beside ACCOUNT in the top bar and beside Notifications in the
   member menu (FEAT-98) */
.lm-count,
.lm-topbar-links a.lm-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: #dc3545;
    color: #FFF;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none;
}

#main .list-group-item .lm-count {
    margin-left: 0.5rem;
}

/* Breaking News (FEAT-172): a red bar under the grey top bar for each current alert, with a close button for the visit.
   White on #b3261e is 6.5:1. */
.lm-breaking {
    background-color: #b3261e;
    color: #FFF;
    font-size: 0.9rem;
}

.lm-breaking[hidden] {
    display: none;
}

.lm-breaking > .container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.lm-breaking-icon {
    flex: none;
}

.lm-breaking-label {
    flex: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

.lm-breaking-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.lm-breaking-text a {
    color: #FFF;
    text-decoration: underline;
}

.lm-breaking-text a:hover {
    text-decoration-thickness: 2px;
}

.lm-breaking-close {
    flex: none;
    margin-left: auto;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: #FFF;
    line-height: 1;
}

.lm-breaking-close:hover,
.lm-breaking-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* On a phone the label is left out (the icon stays) so the message has the width */
@media (max-width: 575.98px) {
    .lm-breaking > .container {
        align-items: flex-start;
    }

    .lm-breaking-label {
        display: none;
    }
}

.lm-middle {
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
}

.lm-middle > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    min-height: 44px;
}

.lm-middle-title {
    color: var(--lm-accent-fg);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    min-width: 0;
}

.lm-middle-title:hover {
    color: var(--lm-accent-fg);
}

.lm-social {
    margin-left: auto;
}

/* The affiliate league's logo at the end of the accent bar (UX-161): it keeps the bar's height */
.lm-affiliate {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

.lm-affiliate img {
    display: block;
    max-height: 32px;
    max-width: 160px;
    width: auto;
    height: auto;
}

.lm-social a {
    color: var(--lm-accent-fg);
    margin-right: 12px;
    font-size: 1rem;
}

.lm-social a:hover {
    opacity: 0.7;
}

.lm-nav {
    background-color: var(--lm-nav-bg);
    padding-block: 8px;
}

.lm-nav .navbar-brand {
    margin-right: 0;
    padding: 0;
}

.lm-nav .navbar-brand img {
    max-height: 100px;
    max-width: 250px;
    width: auto;
    height: auto;
}

.lm-nav .navbar-toggler {
    color: var(--lm-nav-fg);
    border-color: rgba(255, 255, 255, 0.35);
    font-size: 1.5rem;
}

.lm-nav .navbar-nav > .nav-item > .nav-link {
    color: var(--lm-nav-fg);
    font-family: var(--lm-text-font);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    padding: 15px 20px;
    border: 1px solid transparent;
    border-radius: 15px;
}

.lm-nav .navbar-nav > .nav-item > .nav-link:hover,
.lm-nav .navbar-nav > .nav-item > .nav-link:focus-visible {
    background-color: var(--lm-hover);
    border-color: var(--lm-line);
    color: #000;
}

/* An open menu's title joins its list, white on white */
.lm-nav .navbar-nav > .dropdown > .nav-link.show {
    background-color: #FFF;
    border-color: var(--lm-line);
    color: #000;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.lm-nav .dropdown-menu {
    --bs-dropdown-min-width: 210px;
    --bs-dropdown-font-size: 0.875rem;
    margin-top: -1px !important;
    padding: 0;
    border: 0;
    border-bottom: 2px solid #CED2D6;
    border-radius: 0 3px 3px 3px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
    font-family: var(--lm-text-font);
}

.lm-nav .dropdown-menu:not(.lm-mega) > li + li {
    border-top: 1px solid var(--lm-line);
}

.lm-nav .dropdown-item {
    padding: 13px 20px;
    line-height: 18px;
    text-transform: uppercase;
    color: #000;
    white-space: normal;
}

.lm-nav .dropdown-item:hover,
.lm-nav .dropdown-item:focus,
.lm-nav .dropdown-item.active {
    background-color: #000;
    color: #FFF;
}

.lm-nav .dropdown-header {
    padding: 13px 20px 6px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* TEAMS: a column's heading that is a link to its division's page (p/Division), in the weight of the label it replaces */
.lm-nav .dropdown-item.lm-menu-heading {
    font-weight: 600;
}

.lm-nav .dropdown-divider {
    margin: 0;
    border-color: var(--lm-line);
}

/* INFORMATION and TEAMS: the columns' headings and links as on the leagues' Resources and Teams menus */
.lm-nav .lm-mega {
    padding: 15px 20px;
}

/* A column's heading, a label or (TEAMS) a link to the division's page; a long one wraps within its column */
.lm-nav .lm-mega .dropdown-header,
.lm-nav .lm-mega .dropdown-item.lm-menu-heading {
    padding: 0 0 10px;
    font-size: 1.125rem;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: normal;
}

/* TEAMS: a conference's division, a smaller label over its teams */
.lm-nav .lm-mega .dropdown-item.lm-menu-sub {
    padding-top: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.lm-nav .lm-mega .dropdown-item {
    padding: 4px 0;
    text-transform: none;
}

.lm-nav .lm-mega .dropdown-item:hover,
.lm-nav .lm-mega .dropdown-item:focus {
    background: none;
    color: #000;
    text-decoration: underline;
}

/* Desktop: the logo with a rule after it, and the menu to its right, its titles without Bootstrap's caret */
@media (min-width: 992px) {
    .lm-nav .navbar-nav > .dropdown > .dropdown-toggle::after {
        display: none;
    }

    .lm-nav .navbar-brand {
        padding-right: 50px;
    }

    .lm-nav .navbar-nav {
        margin-block: 33px;
    }

    /* INFORMATION spans the menu bar's container, so the pointer reaches it straight down from its title */
    .lm-nav > .container {
        position: relative;
    }

    .lm-nav .lm-mega {
        top: auto;
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        border-radius: 3px;
    }
}

/* Phones and tablets: the accent bar gives way to the menu bar's logo, and the open menu is in the accent colour */
@media (max-width: 991.98px) {
    .lm-middle {
        display: none;
    }

    .lm-nav .navbar-brand img {
        max-height: 56px;
        max-width: 160px;
    }

    .lm-nav .navbar-collapse {
        margin-top: 8px;
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        background-color: var(--lm-accent);
    }

    .lm-nav .navbar-nav > .nav-item > .nav-link {
        color: var(--lm-accent-fg);
        border-radius: 0;
    }

    .lm-nav .dropdown-menu,
    .lm-nav .lm-mega {
        width: auto !important;
        left: 0 !important;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ---- Home page: news cards and sponsor tiles ---- */

.news-post {
    gap: 30px !important;
    margin-bottom: 40px !important;
}

.news-post .news-date {
    width: 60px !important;
    height: 60px;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--lm-nav-bg) !important;
    border-radius: 50% !important;
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.news-post .news-day {
    font-size: 20px !important;
    margin-bottom: 1px;
}

.news-post .news-month {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.news-post .news-body {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-bottom-width: 2px;
    border-radius: 10px;
    padding: 60px 80px;
}

#main .news-post .news-title {
    font-size: 2.5rem;
    margin-bottom: 15px !important;
}

@media (max-width: 767.98px) {
    .news-post {
        gap: 12px !important;
    }

    .news-post .news-body {
        padding: 24px;
    }

    #main .news-post .news-title {
        font-size: 1.75rem;
    }
}

/* The home page's Scoreboard and Upcoming Events (FEAT-76): a list of white rounded tiles, one for each game or event */
#main .lm-home-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

#main .lm-home-item {
    display: block;
    background-color: #FFF;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}

#main a.lm-home-item:hover {
    opacity: 0.7;
}

#main .lm-home-when {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 4px;
}

#main .lm-home-team {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}

#main .lm-home-score {
    font-weight: 700;
}

#main .lm-home-status,
#main .lm-home-detail {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

#main .lm-home-title {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}

#main .lm-home-date {
    font-size: 0.875rem;
    font-weight: 600;
    margin: -12px 0 12px;
}

.sponsor-logo {
    display: block;
    background-color: #FFF;
    border-radius: 20px;
    padding: 10px;
    overflow: hidden;
}

.sponsor-logo:hover {
    opacity: 0.7;
}

/* ---- Site pages and the member area (/my/): the side menu as a white rounded box ---- */

/* Side by side, the page stands 30px clear of the menu's column (lm-side), as on taybs.org, not the row's 24px gutter */
@media (min-width: 992px) {
    #main .lm-side + div {
        padding-left: calc(var(--bs-gutter-x) * 0.5 + 0.375rem);
    }
}

#main .list-group {
    background-color: #FFF;
    padding: 0 20px;
    border-radius: 0;
}

#main .list-group:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 10px;
}

#main .list-group:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
}

#main .list-group + .list-group .list-group-item {
    border-top: 1px solid #E7E9ED;
}

#main .list-group-item {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 10px 0;
    color: #000;
    font-size: 0.875rem;
    text-transform: uppercase;
}

#main .list-group-item:hover,
#main .list-group-item.active {
    background: none;
    color: #000;
    font-weight: 600;
}

/* ---- Division (p/Division): the Scoreboard's strip of game days, a white tile for each, which scrolls sideways when
   the days don't fit; the day being shown has the menu bar's colour as its border ---- */

#main .lm-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

#main .lm-days > a {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 6px 14px;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

#main .lm-days > a > strong {
    font-size: 1.125rem;
}

#main .lm-days > a:hover {
    opacity: 0.7;
}

#main .lm-days > a[aria-current] {
    border-color: var(--lm-nav-bg);
}

/* The division's name: a banner in the tenant's accent colours, the season and the number of teams in small capitals
   over the name */
#main .lm-division-head {
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
    border-radius: 10px;
    padding: 20px 26px 16px;
    margin-bottom: 28px;
}

#main .lm-division-head > h1 {
    margin: 0;
    color: var(--lm-accent-fg);
}

#main .lm-division-kicker {
    margin: 0 0 4px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#main .lm-division-kicker a {
    color: inherit;
}

/* The division's rules under the banner: a white pill for each */
#main .lm-division-facts > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

#main .lm-division-facts > ul > li {
    margin: 0 !important;
    padding: 5px 14px;
    background-color: #FFF;
    border-radius: 30px;
    color: #000;
}

/* A section's heading over a short bar in the accent colour; what sits beside it (a date tag) goes to the right */
#main .lm-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

#main .lm-bar-head > :is(h2, h3) {
    margin: 0;
    padding-bottom: 8px;
    background: linear-gradient(var(--lm-accent), var(--lm-accent)) left bottom / 44px 4px no-repeat;
}

#main .lm-bar-head > .lm-today {
    margin-left: 0;
}

/* A team's badge (Core_User.TeamBadgeHtml), where the leagues' sites show a jersey: its initials in a round tag in the
   menu bar's colours, ringed in the accent colour */
#main .lm-team-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--lm-accent);
    border-radius: 50%;
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
    font-family: var(--lm-heading-font);
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.03em;
    padding-top: 0.1em;
}

/* A game as a scoreboard card (ProgramGame.ScoreCardHtml), after the leagues' own: a white rounded card in three bands
   parted by thin lines: the status or the time in small type, the two teams in larger type, each after its badge and
   with its score at the right (the side that lost in grey), and the field in small grey type */
#main .lm-sb {
    display: block;
    height: 100%;
    background-color: #FFF;
    border-radius: 10px;
    color: #000;
    text-decoration: none;
    transition: box-shadow 0.15s ease-in-out;
}

#main a.lm-sb:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

#main .lm-sb-top,
#main .lm-sb-foot {
    display: block;
    padding: 9px 16px;
    font-size: 0.75rem;
}

#main .lm-sb-top {
    border-bottom: 1px solid var(--lm-line);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#main .lm-sb-foot {
    border-top: 1px solid var(--lm-line);
    color: #555;
}

#main .lm-sb-teams {
    display: block;
    padding: 8px 16px;
}

#main .lm-sb-team {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

#main .lm-sb-name {
    flex: 1 1 auto;
}

#main .lm-sb-score {
    font-size: 1.375rem;
    font-weight: 600;
}

#main .lm-sb-lost > .lm-sb-name,
#main .lm-sb-lost > .lm-sb-score {
    color: #767676;
}

/* ---- Standings tables (p/Division; Core_User.ProgramStandingsTableHtml): a white rounded card under a
   band in the menu bar's colours that names the columns; rows parted by a thin line; each team's place a grey number
   before its badge and name; plain type throughout, no bold (the owner, 2026-10-12); a run difference green when the
   team is ahead and red when it is behind ---- */

#main .lm-standings-box {
    background-color: #FFF;
    border-radius: 10px;
}

#main .lm-standings {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--lm-hover);
    --bs-table-border-color: var(--lm-line);
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

#main .lm-standings > thead > tr > th {
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
    border-bottom: 0;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

#main .lm-standings > thead abbr {
    text-decoration: none;
    cursor: help;
}

#main .lm-standings > tbody > tr > * {
    padding: 10px 12px;
    white-space: nowrap;
}

#main .lm-standings > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* The team's column takes the width the figures leave, and a long name wraps */
#main .lm-standings > tbody > tr > th {
    width: 100%;
    white-space: normal;
    font-weight: 400;
}

/* The team's badge, smaller than on a scoreboard card, then its name */
#main .lm-standings > tbody > tr > th > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

#main .lm-standings > tbody > tr > th > a:hover > span:last-child {
    text-decoration: underline;
}

#main .lm-standings .lm-team-dot {
    width: 1.875rem;
    height: 1.875rem;
    border-width: 1.5px;
    font-size: 0.875rem;
}

#main .lm-standings .lm-standings-rank {
    width: 1%;
    padding-right: 0;
    text-align: center;
}

#main .lm-standings > tbody .lm-standings-rank {
    color: #555;
}

#main .lm-standings .lm-diff-up {
    color: #1A7F37;
}

#main .lm-standings .lm-diff-down {
    color: #C62828;
}

/* The full table is in the page's own size of type, a step up from the site's other tables, and the lines under it on
   a division's Standings view (the tiebreakers, the standings notes and the key) a step down (the owner, 2026-10-12) */
#main .lm-standings:not(.lm-standings-compact) {
    font-size: 1rem;
}

#main .lm-standings-note {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* Beside a division page's games the cells are closer, so the short table fits half the page and a phone */
#main .lm-standings-compact > thead > tr > th,
#main .lm-standings-compact > tbody > tr > * {
    padding-left: 8px;
    padding-right: 8px;
}

/* ---- Team (p/Team): the roster, a round photo over each player's name, four across and two on a phone ---- */

#main .lm-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#main .lm-roster > li {
    margin-bottom: 50px;
}

/* The photo, or the grey figure drawn for a player who has none */
#main .lm-roster-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 1px solid #EEE;
    border-radius: 50%;
    background-color: #FFF;
    object-fit: cover;
    fill: #B3B3B3;
}

#main .lm-roster-first,
#main .lm-roster-last {
    display: block;
    font-family: var(--lm-heading-font);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

#main .lm-roster-first {
    font-size: 1.375rem;
    line-height: 1.5;
}

#main .lm-roster-last {
    margin-top: -7px;
    font-size: 1.875rem;
    line-height: 1.3;
}

#main .lm-roster-number {
    display: block;
    color: #555;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    #main .lm-roster {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The Staff box's picture, beside each staff member's name (FEAT-171): a small round photo, or the grey figure for one with none */
#main .lm-staff-photo {
    display: block;
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid #EEE;
    border-radius: 50%;
    background-color: #FFF;
    object-fit: cover;
    fill: #B3B3B3;
}

/* Team Contacts: a small round icon for each thing a person is to the team (staff, player, parent), in the Role column
   and in the key above the table */
#main .lm-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    font-size: 1rem;
    vertical-align: middle;
}

#main .lm-role-staff {
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
}

#main .lm-role-player {
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
}

#main .lm-role-parent {
    background-color: var(--lm-line);
    color: #000;
}

/* ---- Facilities (p/Facilities, p/Facility): white rounded cards, maps, the field diagram and the forecast ---- */

#main .lm-card {
    background-color: #FFF;
    border-bottom: 2px solid var(--lm-line);
    border-radius: 10px;
    padding: 24px;
}

#main .lm-card > h2,
#main .lm-card > div > h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

#main .lm-card p + h2 {
    margin-top: 1.25rem;
}

#main .lm-card > p:last-child {
    margin-bottom: 0;
}

/* Leaflet's layers stay under the menus that open over the map */
.lm-map {
    position: relative;
    z-index: 0;
    height: 260px;
    border-radius: 10px;
    background-color: #E9ECEF;
}

.lm-map-list {
    height: 420px;
}

.lm-map-legend {
    margin-top: 0.5rem;
    color: #555;
}

.lm-dot {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #6C757D;
    vertical-align: -0.05em;
}

.lm-dot-home {
    background-color: var(--lm-accent);
}

/* A park's card on the list: its owner (someone else's park), its name and town, and a link for each field. The owner's
   logo, when it has one, sits to the right of those, kept small whatever its shape. */
/* The logo is no taller than the two lines a home park's header has (its name and town), and sits level with their
   middle, so it never reaches down to the rule above the fields; the gap to that rule belongs to the header. */
#main .lm-venue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

#main .lm-venue-title {
    min-width: 0;
}

#main .lm-venue-head .lm-venue-place,
#main .lm-venue-head h3.lm-venue-name:last-child {
    margin-bottom: 0;
}

#main .lm-venue-logo {
    flex: 0 0 auto;
    max-width: 110px;
    max-height: 48px;
    object-fit: contain;
}

/* ...and a plain grey crest where the owner has no logo on file */
#main .lm-venue-logo-none {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #EEF0F2;
    color: #A7AFB7;
    line-height: 1;
}

/* The shield is a drawing 24 pixels square, so it sits on whole pixels, dead centre in the 48-pixel circle */
#main .lm-venue-logo-none svg {
    display: block;
    width: 24px;
    height: 24px;
}

#main .lm-venue-owner {
    margin-bottom: 0.25rem;
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#main h3.lm-venue-name {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

#main .lm-venue-place {
    margin-bottom: 0.75rem;
    color: #555;
    font-size: 0.9375rem;
}

#main .lm-venue-fields {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

#main .lm-venue-fields > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lm-line);
}

#main .lm-venue-fields a {
    color: #000;
    font-weight: 600;
    text-decoration-color: rgba(0, 0, 0, 0.35);
}

#main .lm-venue-fields a:hover {
    text-decoration-color: #000;
}

#main .lm-venue-icons {
    display: inline-flex;
    gap: 0.6rem;
    margin-left: auto;
    color: #555;
    font-size: 1.05rem;
}

#main .lm-venue-filter {
    width: 100%;
    max-width: 18rem;
    border-radius: 30px;
}

/* A park's photo across the top of its card, out to the card's edges, cropped to one height */
#main .lm-venue-photo {
    display: block;
    margin: -24px -24px 16px;
}

#main .lm-venue-photo img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

#main .lm-venue-photo:hover img {
    opacity: 0.85;
}

/* A field's page: its photo across the page, cropped to a band on a wide screen and whole on a phone. A photo narrower
   than the page is never enlarged: lm-facilities.js gives it its own width as a max-width, and it sits in the middle. */
#main .lm-photo img {
    display: block;
    width: 100%;
    max-height: 460px;
    margin-inline: auto;
    object-fit: cover;
    border-radius: 10px;
    background-color: #E9ECEF;
}

/* A field's page: the Home field tag after the park's name, smaller than the heading it sits in */
#main h1 > .lm-today {
    font-size: 0.45em;
    vertical-align: 0.35em;
}

/* What the field has: an icon in the tenant's accent colours beside each line */
#main .lm-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

#main .lm-amenities > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#main .lm-amenity-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
    font-size: 1.35rem;
}

.lm-icon {
    vertical-align: -0.125em;
}

/* A field's page: the facility's own words under Good to Know, rich text from the portal's editor, at the size of the
   At the Field list above it. Its headings are the editor's Heading 3 and 4, under the card's own heading 2. A picture
   is as wide as its editor made it (its width attribute, a share of the card), never wider than the card. */
#main .lm-richtext {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

#main .lm-richtext h3 {
    margin-top: 1.25rem;
    font-size: 1.25rem;
}

#main .lm-richtext h4 {
    margin-top: 1rem;
    font-size: 1.1rem;
}

#main .lm-richtext > :first-child {
    margin-top: 0;
}

#main .lm-richtext > :last-child {
    margin-bottom: 0;
}

#main .lm-richtext li + li {
    margin-top: 0.4rem;
}

#main .lm-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* On a phone a share of the card is too small to read: every picture fills the card */
@media (max-width: 575.98px) {
    #main .lm-richtext img {
        width: 100%;
    }
}

#main .lm-richtext blockquote {
    padding-left: 1rem;
    border-left: 4px solid var(--lm-line);
}

/* The field diagram (drawn by p/Facility): grass, dirt, chalk, and a fence only when the field has one */
#main .lm-field-svg {
    display: block;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
}

.lm-field-grass { fill: #4E9A3F; }
.lm-field-dirt { fill: #C9A06C; }
.lm-field-line { stroke: #FFF; stroke-width: 2.5; stroke-linecap: round; }
.lm-field-base { fill: #FFF; }
.lm-field-fence { stroke: #1F2933; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }

.lm-field-distance {
    fill: #FFF;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 3px;
    paint-order: stroke;
    font-family: var(--lm-heading-font);
    font-size: 34px;
    letter-spacing: 0.02em;
}

.lm-field-unit {
    font-size: 15px;
}

.lm-field-position {
    fill: #FFF;
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 2.5px;
    paint-order: stroke;
    font-family: var(--lm-text-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* The forecast (written by p/FacilityWeather.ashx): a row for each period */
#main .lm-weather {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

#main .lm-weather > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--lm-line);
}

#main .lm-weather > li:first-child {
    border-top: 0;
    padding-top: 0;
}

#main .lm-weather-icon {
    flex: 0 0 2rem;
    color: #555;
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
}

/* The icon takes a colour from its weather: p/FacilityWeather.ashx adds one of these to it */
#main .lm-weather-sun { color: #F2A900; }
#main .lm-weather-night { color: #5B6BB5; }
#main .lm-weather-cloud { color: #7A8691; }
#main .lm-weather-rain { color: #2F7FD1; }
#main .lm-weather-storm { color: #6B4FBB; }
#main .lm-weather-snow { color: #5BB6E5; }
#main .lm-weather-fog { color: #9AA3AB; }
#main .lm-weather-wind { color: #2A9D8F; }

#main .lm-weather-when {
    flex: 1 1 auto;
    min-width: 0;
}

#main .lm-weather-what {
    display: block;
    color: #555;
    font-size: 0.8125rem;
    line-height: 1.3;
}

#main .lm-weather-temp {
    flex: 0 0 auto;
    font-family: var(--lm-heading-font);
    font-size: 1.6rem;
    line-height: 1;
}

/* ---- Game (p/Game): the scoreboard, who is playing and the field ---- */

/* A small button inside a card (Log in, Get directions), under the site's large pill buttons */
#main .btn.lm-btn-small {
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
}

#main .lm-game {
    padding: 28px 24px;
    text-align: center;
}

#main .lm-game-kicker {
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Visitors, the score (or "at") and home: the outer columns are equal, so the middle stays centred whatever the names */
#main h1.lm-game-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
    margin: 0 0 0.75rem;
}

#main .lm-game-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

#main .lm-game-role,
#main .lm-game-record {
    color: #555;
    font-family: var(--lm-text-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

#main .lm-game-name {
    color: #000;
    font-size: 2.75rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-decoration: none;
}

#main a.lm-game-name:hover {
    text-decoration: underline;
}

#main .lm-game-middle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

#main .lm-game-score {
    font-size: 3.5rem;
    line-height: 1;
}

#main .lm-game-dash {
    color: #555;
    font-size: 2rem;
    line-height: 1;
}

#main .lm-game-at {
    color: #555;
    font-size: 1.375rem;
}

#main .lm-game-status {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
}

#main .lm-game-status .lm-today {
    margin-left: 0;
}

/* When and where, a line of three on a wide screen and one under another on a phone */
#main .lm-game-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 2rem;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--lm-line);
    list-style: none;
    font-size: 1rem;
}

#main .lm-game-facts > li > i {
    margin-right: 0.5rem;
    color: #555;
}

#main .lm-game-facts a {
    color: #000;
    text-decoration-color: rgba(0, 0, 0, 0.35);
}

#main .lm-game-facts a:hover {
    text-decoration-color: #000;
}

@media (max-width: 575.98px) {
    #main h1.lm-game-board {
        column-gap: 0.75rem;
    }

    #main .lm-game-name {
        font-size: 1.75rem;
    }

    #main .lm-game-score {
        font-size: 2.25rem;
    }

    #main .lm-game-middle {
        gap: 0.4rem;
    }

    #main .lm-game-facts {
        flex-direction: column;
        align-items: center;
    }
}

/* Who's Playing: a team's name over a row for each answer (a dot in the answer's colour, how many gave it and the
   answer), each with the players who gave it listed under it, in line with the row's text */
#main .lm-game-team-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
    margin-bottom: 0.25rem;
}

#main h3.lm-game-team {
    margin-bottom: 0.25rem;
    font-size: 1.375rem;
}

#main .lm-game-team-head > h3.lm-game-team {
    margin-bottom: 0;
}

/* The team's name is the link to its own page for the game: black like the heading, underlined on hover */
#main h3.lm-game-team a {
    color: #000;
    text-decoration: none;
}

#main h3.lm-game-team a:hover {
    text-decoration: underline;
}

/* The answers stand a little apart from each other; the first sits closer under the team's name */
#main .lm-game-team-head + h4.lm-game-answer {
    margin-top: 0.9rem;
}

#main h4.lm-game-answer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.25rem;
    color: #000;
    font-family: var(--lm-text-font);
    font-size: 1rem;
    font-weight: 600 !important;
    text-transform: none;
}

/* The circle in the answer's colour holds how many gave it, centred both ways; three digits widen it into a pill */
#main .lm-game-dot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #FFF;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

/* White on the green and the red; black on the orange, where white is too faint to read */
#main .lm-game-dot-yes { background-color: #198754; }
#main .lm-game-dot-no { background-color: #DC3545; }
#main .lm-game-dot-none { background-color: #FD7E14; color: #000; }

/* The names start in line with the answer's word, past the circle */
#main .lm-game-names {
    margin: 0;
    padding: 0 0 0 2.25rem;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Umpires and Volunteers: a row for each person, the name on the left and the role, in grey, on the right */
#main .lm-game-people {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

#main .lm-game-people > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lm-line);
}

#main .lm-game-people > li:first-child {
    border-top: 0;
    padding-top: 0;
}

#main .lm-game-people > li:last-child {
    padding-bottom: 0;
}

#main .lm-game-person {
    font-weight: 600;
}

/* A person's mobile number under their name, for the game's staff: small, grey and in ordinary weight */
#main .lm-game-person-phone {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
}

#main .lm-game-person-role {
    color: #555;
    font-size: 0.875rem;
}

/* The Field: its name over the address, and what a visitor plans around there as a row of small icons with a word each */
#main .lm-game-field {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

#main .lm-game-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--lm-line);
    list-style: none;
    font-size: 0.875rem;
}

#main .lm-game-amenities > li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#main .lm-game-amenities .lm-amenity-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
}

/* ---- Footer ---- */

.lm-footer {
    flex-shrink: 0;
    background-color: #FFF;
    color: #000;
    font-size: 0.875rem;
    line-height: 22px;
}

.lm-footer-columns {
    padding-block: 16px;
}

.lm-footer-columns .row > div {
    padding-block: 10px;
}

.lm-footer-columns img {
    max-width: 100%;
    max-height: 180px;
}

/* From tablet width up the logo column is a good third of the row, and the logo is pulled left by the blank margin
   inside its own image (--lm-logo-inset, measured by leaguemanager.js), so its artwork starts at the row's left edge */
@media (min-width: 768px) {
    .lm-footer-columns .row > .lm-footer-logo {
        flex: 0 0 auto;
        width: 36%;
    }

    .lm-footer-logo img {
        transform: translateX(calc(var(--lm-logo-inset, 0%) * -1));
    }
}

.lm-footer-columns h2 {
    font-size: 1.125rem;
    margin-bottom: 0;
}

.lm-footer-columns p {
    margin-bottom: 0;
}

.lm-footer-columns a {
    color: #000;
}

.lm-footer-bottom {
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
}

.lm-footer-bottom > .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 30px;
    padding-block: 14px;
}

.lm-footer-bottom p {
    margin: 0;
}

.lm-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lm-footer-bottom a {
    color: var(--lm-nav-fg);
    text-decoration: none;
}

.lm-footer-bottom a:hover {
    text-decoration: underline;
}