/* 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;
}

/* Outlined buttons (the sign-in page's passkey and sign-in link, APP-721): a black outline and text that fill black on
   hover, as the filled buttons are black, not Bootstrap's blue */
#main .btn-outline-primary {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #555;
    --bs-btn-active-border-color: #555;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-border-color: #000;
}

/* Check boxes, radio buttons and switches: black when on and a grey focus ring, as the buttons, not Bootstrap's blue
   (APP-265). A switch's knob, which Bootstrap turns pale blue while it has the focus, stays grey. */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #000;
    border-color: #000;
}

.form-check-input:focus {
    border-color: #555;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

/* 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 plain icon beside ADMIN CONSOLE, like the bar's other icons, that opens the portal in a new tab (APP-241). A flex
   box, so the icon lines up as the bar's other icons do, which are flex items of their li. */
.lm-topbar-links a.lm-newtab {
    display: flex;
    align-items: center;
}

/* The arrow fills its whole square, so at the text's size it stands a quarter taller than the capitals beside it: at
   three quarters of the size its top and bottom meet theirs */
.lm-topbar-links a.lm-newtab i {
    font-size: 0.75em;
}

.lm-topbar-links a.lm-newtab:hover {
    text-decoration: none;
    opacity: 0.6;
}

/* 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,
#main .lm-tabs .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);
}

/* A menu leaguemanager.js opens right-aligned, so it doesn't run past the window: its square corner moves to the right (APP-264) */
.lm-nav .dropdown-menu-end {
    border-radius: 3px 0 3px 3px;
}

.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;
    }

    /* A plain menu (PROGRAMS, ABOUT, EVENTS) is as wide as its longest item, each on one line, instead of wrapping one
       like "Spring Baseball & T-Ball" onto two inside the 210px minimum (APP-351); a menu near the window's right edge
       opens right-aligned (leaguemanager.js, APP-264). The folded phone menu still wraps them. */
    .lm-nav .dropdown-menu:not(.lm-mega) .dropdown-item {
        white-space: nowrap;
    }

    .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;
    }

    /* INFORMATION and TEAMS are as wide as their columns (APP-911: one column of pages used to sit at the left of a panel
       as wide as the bar), each column 16rem (13rem below 1200px, where the bar is 960px) and up to four in a row, never
       wider than the bar. leaguemanager.js moves the panel under its title, or as far right as it fits. */
    .lm-nav {
        --lm-mega-column: 13rem;
    }

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

    .lm-nav .lm-mega .row {
        max-width: calc(4 * var(--lm-mega-column) + var(--bs-gutter-x, 1.5rem));
    }

    .lm-nav .lm-mega .row > * {
        width: var(--lm-mega-column);
    }
}

@media (min-width: 1200px) {
    .lm-nav {
        --lm-mega-column: 16rem;
    }
}

/* 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;
}

/* A section heading that is itself the link to the full list (APP-254): the heading's own colour, no underline, and a
   small chevron that moves on hover to show it opens something */
/* A box heading and its chevron stay on one line (APP-499): the chevron used to drop to the next line under FEATURED SPONSOR */
/* The heading's text and its arrow are two flex items, so the arrow never drops to a line of its own (APP-499) and the link never
   runs past its column (a narrow sidebar column such as FEATURED SPONSOR's): the text stays on one line where it fits and wraps
   inside its own box where it doesn't, the arrow staying beside it. */
#main .lm-head-link {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

/* The heading's words never wrap (APP-633, the owner's third report: FEATURED SPONSOR broke onto two lines in the narrow side column, because
   overflow-wrap: anywhere let the flex item shrink below its words). The text keeps its line and the box heading shrinks with its column
   instead (the container query below), so a narrow column never makes the page scroll sideways either (APP-499). */
#main .lm-head-link .lm-head-text {
    white-space: nowrap;
}

#main section.mb-5 {
    container-type: inline-size;
}

@container (max-width: 150px) {
    .lm-head-link .lm-head-text {
        font-size: 0.8em;
    }
}

#main .lm-head-link .bi {
    flex: none;
    font-size: 0.6em;
    margin-left: 6px;
    transition: margin-left 0.15s;
}

#main .lm-head-link:hover .bi,
#main .lm-head-link:focus-visible .bi {
    margin-left: 10px;
}

/* An event card on the home page (APP-254): a date block in the league's accent colour beside the title and details */
#main .lm-home-event {
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 4px solid var(--lm-accent);
}

#main .lm-home-event-body {
    min-width: 0;
}

#main .lm-datebox {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    border-radius: 8px;
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
    line-height: 1;
}

#main .lm-datebox-month {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#main .lm-datebox-day {
    font-family: var(--lm-heading-font);
    font-size: 1.75rem;
    margin-top: 2px;
}

/* A game as a card in a list (ProgramGame.GameCardHtml, APP-259): a white rounded card ringed by a thin line, the date
   block (weekday, day, month) on the left, then the time with the Today tag, the status and the program in small type,
   and the two teams after their badges. The whole card is the link to the game. */
#main .lm-gc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#main a.lm-gc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--lm-line);
    border-left: 4px solid var(--lm-accent);
    border-radius: 10px;
    background-color: #FFF;
    color: inherit;
    text-decoration: none;
}

#main a.lm-gc:hover,
#main a.lm-gc:focus-visible {
    background-color: var(--lm-hover);
}

#main .lm-gc .lm-datebox {
    height: auto;
    padding: 6px 0;
}

#main .lm-gc-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#main .lm-gc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

#main .lm-gc-top .lm-today {
    margin-left: 0;
}

#main .lm-gc-program {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

#main .lm-gc-field {
    font-weight: 400;
}

#main .lm-gc-top > i,
#main .lm-gc-field > i {
    margin-right: 4px;
    color: #555;
}

/* Communications' inbox (APP-272): a white box of plain rows parted by thin lines, in the site's black and grey. An unread
   message has a dot in the accent colour and a bold subject; the row opens the message's dialog, and the small icon button
   at the right marks it read or unread. Not a list-group, whose side-menu styling (capitals) the member pages give it. */
#main .lm-inbox {
    border: 1px solid var(--lm-line);
    border-radius: 10px;
    background-color: #FFF;
    overflow: hidden;
}

#main .lm-inbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

#main .lm-inbox-row + .lm-inbox-row {
    border-top: 1px solid var(--lm-line);
}

#main .lm-inbox-row:hover {
    background-color: var(--lm-hover);
}

#main .lm-inbox-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: transparent;
}

#main .lm-inbox-unread .lm-inbox-dot {
    background-color: var(--lm-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#main .lm-inbox-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

#main .lm-inbox-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main .lm-inbox-unread .lm-inbox-subject {
    font-weight: 700;
}

#main .lm-inbox-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

#main .btn.lm-inbox-mark {
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
}

/* An unread message's button (Mark as read) is filled in the league's accent colours, a read one's (Mark as unread) stays
   grey and outlined, so the column of buttons shows at a glance what is read and what is not (APP-388) */
#main .lm-inbox-unread .btn.lm-inbox-mark {
    background-color: var(--lm-accent);
    border-color: var(--lm-accent);
    color: var(--lm-accent-fg);
}

#main .lm-inbox-unread .btn.lm-inbox-mark:hover,
#main .lm-inbox-unread .btn.lm-inbox-mark:focus-visible {
    filter: brightness(0.92);
}

/* Mark All Read at the right of the Messages tab's head (APP-388) */
#main .lm-inbox-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* The Family Calendar's list (APP-269): a heading for each day with a date block in the accent colour, then a white card
   for each game (an accent edge) or league event (a dark edge): the kind as a pill with its icon and the time, the two
   teams after their badges or the event's title, then the field, the arrival and the member's role after their icons */
#main .lm-fc-day {
    margin-bottom: 1.75rem;
}

#main .lm-fc-dayhead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.75rem;
}

#main .lm-fc-dayhead .lm-datebox {
    width: 46px;
    height: 50px;
}

#main .lm-fc-dayhead .lm-datebox-day {
    font-size: 1.5rem;
}

#main .lm-fc-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main .lm-fc {
    padding: 12px 16px;
    border: 1px solid var(--lm-line);
    border-left: 4px solid var(--lm-accent);
    border-radius: 10px;
    background-color: #FFF;
}

#main .lm-fc-event,
#main .lm-fc-practice {
    border-left-color: var(--lm-nav-bg);
}

#main .lm-fc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
}

#main .lm-fc-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.2em 0.65em;
    border-radius: 30px;
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#main .lm-fc-event .lm-fc-kind,
#main .lm-fc-practice .lm-fc-kind {
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
}

#main .lm-fc-top a,
#main .lm-fc-teams a,
#main .lm-fc-title a {
    color: inherit;
    text-decoration: none;
}

#main .lm-fc-top a:hover,
#main .lm-fc-teams a:hover,
#main .lm-fc-title a:hover {
    text-decoration: underline;
}

#main .lm-fc-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-weight: 700;
}

#main .lm-fc-teams .lm-team-dot {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}

#main .lm-fc-title {
    font-weight: 700;
    font-size: 1.05rem;
}

#main .lm-fc-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

#main .lm-fc-facts i {
    margin-right: 5px;
    color: #555;
}

#main .lm-fc-role {
    padding: 0 8px;
    border-radius: 30px;
    background-color: var(--lm-page);
}

/* The Schedule's controls on one row (APP-262): the division list and the date box at the left, List | Calendar at the
   right; they wrap on a narrow screen */
#main .lm-sched-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 1.5rem;
}

#main .lm-sched-control .form-label {
    display: block;
}

#main .lm-sched-control .form-select,
#main .lm-sched-control .form-control {
    width: auto;
    min-width: 11rem;
}

#main .lm-sched-switch {
    margin-left: auto;
}

#main .lm-gc-final {
    text-transform: uppercase;
}

#main .lm-gc-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-weight: 700;
}

#main .lm-gc-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#main .lm-gc-team .lm-team-dot {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}

#main .lm-gc-at {
    color: var(--bs-secondary-color);
    font-weight: 400;
    font-size: 0.85rem;
}

/* A team's games as cards (p/Team's Games and Schedule, APP-258): the lm-gc card as a list item, not one link, since the
   opponent and the field link to their own pages. The date block and the chevron at the right open the game; the result
   is a chip in green, red or grey; Home or Away a small outlined tag; an event card has an info-coloured edge. */
#main li.lm-tgc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--lm-line);
    border-left: 4px solid var(--lm-accent);
    border-radius: 10px;
    background-color: #FFF;
}

#main li.lm-tgc-event {
    border-left-color: var(--bs-info);
}

#main .lm-tgc .lm-gc-body {
    flex: 1 1 auto;
}

#main .lm-tgc-date {
    text-decoration: none;
}

/* The cards' links in the text's own colour, underlined only on hover (APP-258, the owner's review: the blue was too much):
   the opponent in bold, the field in the line's grey */
#main .lm-tgc .lm-tgc-opponent a {
    color: var(--bs-body-color);
    font-weight: 600;
    text-decoration: none;
}

#main .lm-tgc .lm-gc-field a {
    color: inherit;
    text-decoration: none;
}

#main .lm-tgc .lm-tgc-opponent a:hover,
#main .lm-tgc .lm-tgc-opponent a:focus-visible,
#main .lm-tgc .lm-gc-field a:hover,
#main .lm-tgc .lm-gc-field a:focus-visible {
    text-decoration: underline;
}

/* The Games heading's ">" to the league schedule, and the calendar icon at the bar's right (APP-258) */
#main .lm-games-more,
#main .lm-games-calendar {
    color: var(--bs-body-color);
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
}

#main .lm-games-more:hover,
#main .lm-games-more:focus-visible,
#main .lm-games-calendar:hover,
#main .lm-games-calendar:focus-visible {
    color: var(--lm-accent);
}

#main .lm-tgc .lm-gc-top .bi {
    margin-right: 4px;
    color: #555;
}

#main .lm-tgc-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    color: #FFF;
}

#main .lm-tgc-result .text-body-secondary {
    color: inherit !important;
    opacity: 0.85;
}

#main .lm-tgc-win {
    background-color: var(--bs-success);
}

#main .lm-tgc-loss {
    background-color: var(--bs-danger);
}

#main .lm-tgc-tie {
    background-color: var(--bs-secondary);
}

#main .lm-tgc-side {
    padding: 0 8px;
    border: 1px solid var(--lm-line);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

#main .lm-tgc-opponent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

#main .lm-tgc-opponent .lm-team-dot {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}

#main .lm-tgc-opponent > .bi {
    color: var(--bs-info);
    font-size: 1.25rem;
}

#main .lm-tgc-go {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 6px;
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
}

#main .lm-tgc-go:hover,
#main .lm-tgc-go:focus-visible {
    color: var(--lm-accent);
}

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

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

/* The space under each home page sponsor logo (APP-255): 2.25rem, a quarter less than Bootstrap's mb-5 it had */
.lm-sponsor-row {
    margin-bottom: 2.25rem;
}

/* ---- 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;
}

/* The photo and its jersey number: the number is a dark circle attached to the photo's lower right, over its edge with a
   white ring, centred in it both ways (APP-352; under the name until the owner's note of 2026-10-21); a long number
   widens it into a pill */
#main .lm-roster-pic {
    position: relative;
    display: block;
}

#main .lm-roster-number {
    position: absolute;
    right: 4%;
    bottom: 4%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.5rem;
    border: 3px solid #FFF;
    border-radius: 999px;
    background-color: var(--lm-nav-bg, #000);
    color: #FFF;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* The roster editor behind Edit Roster (APP-341): a narrow number box, and the positions' checkboxes wrapping in a
   column wide enough for a few to a line */
#main .lm-roster-edit-number {
    width: 5rem;
}

#main .lm-roster-edit-positions {
    min-width: 14rem;
}

/* The team page's Fields view (APP-343): a field's grid of days and hours, compact; a taken hour grey with its kind, a
   game darker, a free one still to come a light green link that fills its cell, a past one blank */
#main .lm-avail {
    font-size: 0.75rem;
    table-layout: fixed;
    min-width: 36rem;
}

#main .lm-avail th:first-child {
    width: 4rem;
}

#main .lm-avail td {
    padding: 0;
    height: 1.75rem;
}

#main .lm-avail-taken {
    background-color: #E9ECEF;
    color: #495057;
    font-weight: 600;
}

#main .lm-avail-game {
    background-color: #CED4DA;
    color: #212529;
}

/* Under a taken hour's kind, who takes it (APP-343, the owner's review of 2026-10-21): the teams, the team or the booking, wrapped
   in the cell to at most three lines; the tooltip has it whole */
#main .lm-avail-who {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-bottom: 2px;
    padding: 0 2px;
    font-weight: 400;
    font-size: 0.6875rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* The booking card above the grid (APP-343): a practice or game on the hour chosen, without leaving the team page */
#main .lm-avail-book {
    border-color: #1B5E20;
}

/* An album's photo (APP-472): the cover's star in its top right corner, and on the others a Make Cover star button there that shows
   when the photo is pointed at or has the focus, and faintly all the time on a touch screen, which has no pointing */
#main .lm-photo {
    position: relative;
}

#main .lm-photo-cover,
#main .lm-photo-make-cover {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFD43B;
    font-size: 0.95rem;
}

#main .lm-photo-make-cover {
    color: #FFF;
    opacity: 0;
    transition: opacity 0.15s;
}

#main .lm-photo:hover .lm-photo-make-cover,
#main .lm-photo:focus-within .lm-photo-make-cover {
    opacity: 1;
}

#main .lm-photo-make-cover:hover,
#main .lm-photo-make-cover:focus-visible {
    background-color: #000;
    color: #FFD43B;
}

@media (hover: none) {
    #main .lm-photo-make-cover {
        opacity: 0.75;
    }
}

#main .lm-avail-past {
    background-color: #F8F9FA;
}

/* An hour outside the season's Field Times, or a blacked-out day (APP-390): hatched, with no link */
#main .lm-avail-closed {
    background: repeating-linear-gradient(45deg, #F1F3F5, #F1F3F5 4px, #E2E6EA 4px, #E2E6EA 8px);
}

/* A free hour a viewer may book both ways (APP-390): Practice and Game, one above the other */
#main .lm-avail-free a + a {
    border-top: 1px solid #FFF;
}

#main .lm-avail-free a:only-child {
    line-height: 1.75rem;
}

#main .lm-avail-free a:not(:only-child) {
    line-height: 1.2rem;
}

#main .lm-avail-free a {
    display: block;
    line-height: 1.75rem;
    background-color: #E8F5E9;
    color: #1B5E20;
    text-decoration: none;
}

#main .lm-avail-free a:hover,
#main .lm-avail-free a:focus {
    background-color: #1B5E20;
    color: #FFF;
}

#main .lm-roster-edit .form-select {
    min-width: 6.5rem;
}

#main .lm-roster-edit input[type="file"] {
    min-width: 13rem;
}

/* Position(s), bats and throws as soft pills under the number, one colour each (APP-352: Bootstrap's subtle colours) */
#main .lm-roster-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

#main .lm-roster-tags .badge {
    font-weight: 500;
}

@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 at the right of the heading (smaller since APP-258, the owner's review: they were too big) */
#main .lm-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    font-size: 0.75rem;
    vertical-align: middle;
}

/* The key to the icons: small and grey, on the heading's row */
#main .lm-role-key {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

#main .lm-role-key .list-inline-item {
    margin-right: 0.75rem;
}

/* A person's photo before their name on Team Contacts (APP-258), a circle as on the Roster */
#main .lm-contact-photo {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid #EEE;
    border-radius: 50%;
    background-color: #FFF;
    object-fit: cover;
    fill: #B3B3B3;
}

#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;
}

/* A card with a golden top (the owner's review of APP-256 and APP-259, to give a page's first cards a kick): the league's
   accent colour as a band across the top, fading into the white below. On a field's page (p/Facility) the first card of
   each column has it, whichever card that is (the diagram is drawn only for a ballfield with its distances). */
#main .lm-card-gold,
#main .lm-facility-cols > [class*="col-"] > .lm-card:first-of-type {
    border-top: 5px solid var(--lm-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--lm-accent) 18%, #FFF) 0, #FFF 9rem);
}

#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: 1.25rem 0 0;   /* a little more room under the card's heading (APP-259) */
    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. Bootstrap's btn-sm is the
   same size here (APP-266): the large-button rule above outranked it, so every btn-sm on the member pages was full size. */
#main .btn.lm-btn-small,
#main .btn.btn-sm:not(.btn-link) {
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
}

/* My Family's people (APP-266): a row of round photos, or initials, with first names; the chosen one is ringed in the
   league's accent colour, and its details open beneath */
#main .lm-family-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 1.25rem;
}

#main .lm-family-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* Add a participant at the right end of the people's row (APP-266, the owner's review) */
#main .lm-family-add {
    margin-left: auto;
}

#main .lm-family-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

#main .lm-family-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #E2E5E9;
    color: #333;
    font-size: 1.25rem;
    font-weight: 700;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--lm-line);
}

#main .lm-family-person:hover .lm-family-avatar {
    border-color: #CED2D6;
}

#main .lm-family-person.active .lm-family-avatar {
    border-color: var(--lm-accent);
}

#main .lm-family-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A registration's details on My Family (APP-266): label and value pairs */
#main .lm-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin-bottom: 0;
}

#main .lm-detail-list dt {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

#main .lm-detail-list dd {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    #main .lm-detail-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #main .lm-detail-list dd {
        margin-bottom: 8px;
    }
}

#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;
}

/* The date's icon is the Add to calendar link (APP-256): the icon alone, in the accent colour's ring on hover */
#main .lm-game-facts a.lm-game-addcal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    color: #000;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--lm-line);
}

#main .lm-game-facts a.lm-game-addcal > i {
    margin: 0;
    color: inherit;
}

#main .lm-game-facts a.lm-game-addcal:hover,
#main .lm-game-facts a.lm-game-addcal:focus-visible {
    box-shadow: 0 0 0 2px var(--lm-accent);
}

/* A link that reads as the text it is (APP-256: the Game page's field name): its own colour and no underline, a little
   faded on hover */
#main a.lm-plain-link {
    color: inherit;
    text-decoration: none;
}

#main a.lm-plain-link:hover {
    opacity: 0.7;
}

@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 */
/* A column's head (APP-256): the team's badge beside its side (Visitors or Home) in small grey capitals over its name in
   the text's bold font, on a pale band, so it reads as a team and not as another title like the card's own */
#main .lm-game-team-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background-color: var(--lm-page);
}

#main .lm-game-team-side {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
}

#main h3.lm-game-team {
    margin-bottom: 0.25rem;
    font-family: var(--lm-text-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

#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;
}

/* Tabs in the member area (APP-271, my/Settings): the site's black and grey, not Bootstrap's blue, with the open tab
   marked by the league's accent colour under it */
#main .lm-tabs .nav-link {
    color: #555;
    font-weight: 600;
}

#main .lm-tabs .nav-link:hover {
    color: #111;
}

#main .lm-tabs .nav-link.active {
    color: #111;
    box-shadow: inset 0 -3px 0 var(--lm-accent);
}

/* My Settings (APP-271): each card's main button is small and sits at the card's top right, beside its heading; the
   shared Password, Two-factor and Sign-in notice cards (Controls/AccountSecurity.ascx, LoginNotice.ascx) get it from
   here, under lm-settings only, so the portal's Settings page that also has them is unchanged. On a phone the button
   goes back under the card's fields. */
#main .lm-settings [id$="_btnNameSave"],
#main .lm-settings [id$="_btnEmailSend"],
#main .lm-settings [id$="_btnSave"],
#main .lm-settings [id$="_btnChangePassword"],
#main .lm-settings [id$="_btnSetUp"],
#main .lm-settings [id$="_btnNotice"] {
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
}

@media (min-width: 576px) {
    #main .lm-settings .card-body {
        position: relative;
    }

    #main .lm-settings [id$="_btnNameSave"],
    #main .lm-settings [id$="_btnEmailSend"],
    #main .lm-settings [id$="_btnSave"],
    #main .lm-settings [id$="_btnChangePassword"],
    #main .lm-settings [id$="_btnSetUp"],
    #main .lm-settings [id$="_btnNotice"] {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    #main .lm-settings .card-body:has([id$="_btnNameSave"], [id$="_btnEmailSend"], [id$="_btnSave"], [id$="_btnChangePassword"], [id$="_btnSetUp"], [id$="_btnNotice"]) > h2 {
        padding-right: 13rem;
        min-height: 1.9rem;
    }
}

/* My Notifications (APP-273, the owner's second review): what happened to a change, beside the switch or choice that
   changed: grey while saving, then green Saved or red Not saved. Placed at the left of a switch without moving it (the
   switch's wrapper is the anchor; at its right it ran out of the table in the last column); under the phone choice's list. */
#main .lm-pref-flash {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

#main .form-switch .lm-pref-flash {
    position: absolute;
    right: calc(100% + 0.35rem);
    top: 50%;
    transform: translateY(-50%);
}

#main .form-switch:has(.lm-pref-flash) {
    position: relative;
}

#main td > .lm-pref-flash {
    display: inline-block;
    margin-top: 0.35rem;
}

#main .lm-pref-saving {
    color: var(--bs-secondary-color);
}

#main .lm-pref-saved {
    color: #198754;
}

#main .lm-pref-error {
    color: #DC3545;
}

/* The home page's Scoreboard tiles (APP-253, where they were plain grey text): a white tile with the league's accent colour
   along its top; the time and field with a status pill at the right (final dark, under way in the accent colour, postponed
   or cancelled red); each team with its initials badge ringed in the team's colour, its name and its score, the winner in
   bold and the loser greyed (Core_User ProgramGame.ScoreTileHtml) */
#main .lm-gt {
    display: block;
    background-color: #FFF;
    border-radius: 10px;
    border-top: 4px solid var(--lm-accent);
    padding: 10px 14px 12px;
    margin-bottom: 10px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#main a.lm-gt:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#main .lm-gt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

#main .lm-gt-when {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

#main .lm-gt-pill {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#main .lm-gt-final {
    background-color: #212529;
    color: #FFF;
}

#main .lm-gt-live {
    background-color: var(--lm-accent);
    color: #111;
}

#main .lm-gt-alert {
    background-color: #DC3545;
    color: #FFF;
}

#main .lm-gt-team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-weight: 600;
}

#main .lm-gt-team .lm-team-dot {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    border-width: 3px;
    border-color: var(--lm-team-ring, var(--lm-accent));
}

#main .lm-gt-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main .lm-gt-score {
    flex: 0 0 auto;
    font-family: var(--lm-heading-font);
    font-size: 1.35rem;
    line-height: 1;
}

#main .lm-gt-won .lm-gt-name,
#main .lm-gt-won .lm-gt-score {
    font-weight: 800;
}

#main .lm-gt-lost .lm-gt-name,
#main .lm-gt-lost .lm-gt-score {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* ---- The team page's header (p/Team, APP-291), as on www.taybs.org: a jersey in the team's colour where a logo will go,
   beside the division as a dark pill (a link to its page) over the team's name, on a white card with a bar of the
   league's accent colour; the team menu marks the open view with the accent colour ---- */

#main .lm-team-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #FFF;
    border-radius: 10px;
    border-left: 6px solid var(--lm-accent);
    padding: 0.875rem 1.25rem;
}

/* The jersey: the team's colour (--lm-team-colour, its name's colour word) or the menu bar's, outlined so a white or pale
   jersey still shows, with its collar in the accent colour */
#main .lm-team-jersey {
    flex: 0 0 auto;
    width: 4.5rem;
    color: var(--lm-team-colour, var(--lm-nav-bg));
}

#main .lm-team-jersey svg {
    display: block;
    width: 100%;
    height: auto;
}

#main .lm-team-jersey-body {
    fill: currentColor;
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

#main .lm-team-jersey-trim {
    fill: none;
    stroke: var(--lm-accent);
    stroke-width: 3;
    stroke-linecap: round;
}

/* The same jersey small, before a team's name in a list (the member area's My Teams, APP-350) */
#main .lm-team-jersey.lm-team-jersey-sm {
    width: 1.75rem;
}

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

#main .lm-team-pill {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    background-color: var(--lm-nav-bg);
    color: var(--lm-nav-fg);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

#main .lm-team-pill:hover,
#main .lm-team-pill:focus-visible {
    background-color: var(--lm-accent);
    color: var(--lm-accent-fg);
}

/* The team page's week ahead: today's tag on its own line above the date, the other days keeping the line empty (APP-258) */
#main .lm-week-tag {
    display: inline-block;
    margin: 0 0 0.25rem 0;
}
/* The record (W-L-T), at the header's right on every view, centred on its height (APP-258) */
#main .lm-team-record {
    margin-left: auto;
    align-self: center;
    text-align: right;
}

#main .lm-team-record dt {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
}

#main .lm-team-record dd {
    margin: 0;
    font-family: var(--lm-heading-font);
    font-size: 2rem;
    line-height: 1;
}

#main h1.lm-team-name {
    font-size: 2.5rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    #main .lm-team-jersey {
        width: 3.25rem;
    }

    #main h1.lm-team-name {
        font-size: 1.85rem;
    }
}

#main #teamMenu .list-group-item.active {
    box-shadow: inset 4px 0 0 var(--lm-accent);
    padding-left: 12px;
}
/* A list of tick boxes on the public site (APP-227: Team Games' Umpires Needed), each box a little apart from its label and the
   next box after a wider gap, as the portal spaces them */
#main .lm-check-list input[type="checkbox"] {
    margin-right: 0.35rem;
}

#main .lm-check-list label {
    margin-right: 1rem;
}

/* A team's logo (APP-61): in the standings, the round tag of a team's initials turned white and holding the logo; in the
   team page's header, the logo in the jersey's place, the same size; and the team photo on the team page's Home view */
#main .lm-team-dot.lm-team-logo {
    background-color: #fff;
    overflow: hidden;
    padding: 2px;
}

#main .lm-team-dot.lm-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#main .lm-team-head-logo {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

#main .lm-team-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
    #main .lm-team-head-logo {
        width: 3.25rem;
        height: 3.25rem;
    }
}

/* The Upcoming Events page's All Events gallery (APP-486): a card for each event page, its first picture over its title; three across on a
   desktop, two on a tablet and one on a phone (the grid's row-cols) */
.lm-event-card {
    display: block;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--lm-line, #E6E9ED);
    border-radius: 8px;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.08);
}

.lm-event-card:hover,
.lm-event-card:focus-visible {
    border-color: var(--lm-accent, #FFB81C);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.lm-event-card-picture {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 12rem;
    object-fit: cover;
}

.lm-event-card-none {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: var(--lm-accent, #FFB81C);
    color: var(--lm-accent-fg, #000);
}

.lm-event-card-title {
    display: block;
    padding: 0.6rem 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}