@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }

    .btn {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
    }

    .summary-table, .summary-table * {
        padding: 0 !important;
    }

    .actions {
        display: none !important;
    }

    nav, nav *
    {
        display: none !important;
    }

    .table tbody, .table td, .table tfoot, .table th, .table thead, .table tr
    {
        border-width: 1px !important;
        border-color: darkgray !important;
        padding: 0.1cm 0.1cm !important;
    }

    /* on paper a wide table must not be cut at the scroll edge */
    .table-responsive {
        overflow: visible !important;
    }
}

.cost-value {
    text-align: end;
}

.total {
    font-weight: bold;
    text-align: end;
}

.hit {
    display: block;
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
    text-align: center;
}
.hit-calibrated {
    border: 1px solid currentColor;
}

/* The action column of a real table (score tables) is as wide as its buttons, which never wrap. */
.actions {
    white-space: nowrap;
    width: 1%;
}

/* ---- Colours (UX.md, Colours and dark mode) ----
   Bootstrap 5.3 colour modes: data-bs-theme on <html> (set in _html_head.html.twig, switched by theme_controller.js).
   The app CSS uses these variables, never fixed colours, so both themes work. Primary: steel blue #2b5f8e. */
:root,
[data-bs-theme=light] {
    --bs-primary: #2b5f8e;
    --bs-primary-rgb: 43, 95, 142;
    --bs-primary-text-emphasis: #2b5f8e;
    --bs-primary-bg-subtle: #e6ecf1;
    --bs-primary-border-subtle: #a0b7cc;
    --bs-link-color: #2b5f8e;
    --bs-link-color-rgb: 43, 95, 142;
    --bs-link-hover-color: #1f4466;
    --bs-link-hover-color-rgb: 31, 68, 102;
    --bs-focus-ring-color: rgba(43, 95, 142, .35);
    --app-page-bg: #f4f5f7;
    --app-surface: #fff;
    --app-row-hover-bg: #f0f4f7;
    --app-row-hover-border: #a0b7cc;
    --app-icon: #6c757d;
    --app-icon-on: #2b5f8e;
    --app-icon-ok: #198754;
    /* 3:1 against the row, the shape (a slash) carries the meaning too (1.4.11, 1.4.1) */
    --app-icon-off: #8a9199;
    --app-focus: #2b5f8e;
    --app-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

[data-bs-theme=dark] {
    --bs-body-bg: #1d2125;
    --bs-body-bg-rgb: 29, 33, 37;
    --bs-body-color: #e2e5e9;
    --bs-body-color-rgb: 226, 229, 233;
    --bs-secondary-color: #9aa3ad;
    --bs-border-color: #363b41;
    --bs-primary: #2b5f8e;
    --bs-primary-rgb: 43, 95, 142;
    --bs-primary-text-emphasis: #95afc6;
    --bs-primary-bg-subtle: #213444;
    --bs-primary-border-subtle: #284b6b;
    --bs-link-color: #95afc6;
    --bs-link-color-rgb: 149, 175, 198;
    --bs-link-hover-color: #bccfdf;
    --bs-link-hover-color-rgb: 188, 207, 223;
    --bs-focus-ring-color: rgba(149, 175, 198, .4);
    --app-page-bg: #15181c;
    --app-surface: #212529;
    --app-row-hover-bg: #232f3b;
    --app-row-hover-border: #284b6b;
    --app-icon: #9aa3ad;
    --app-icon-on: #95afc6;
    --app-icon-ok: #75b798;
    --app-icon-off: #6f777f;
    --app-focus: #95afc6;
    --app-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--app-page-bg);
}

/* Bootstrap compiles the button and form colours; they follow the primary colour through their variables */
.btn-primary {
    --bs-btn-bg: #2b5f8e;
    --bs-btn-border-color: #2b5f8e;
    --bs-btn-hover-bg: #244f77;
    --bs-btn-hover-border-color: #224a70;
    --bs-btn-active-bg: #1f4466;
    --bs-btn-active-border-color: #1d405f;
    --bs-btn-disabled-bg: #2b5f8e;
    --bs-btn-disabled-border-color: #2b5f8e;
    --bs-btn-focus-shadow-rgb: 43, 95, 142;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-border-subtle);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2b5f8e;
    --bs-btn-hover-border-color: #2b5f8e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1f4466;
    --bs-btn-active-border-color: #1f4466;
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-focus-shadow-rgb: 43, 95, 142;
}

/* tools of a page (UX.md, Buttons): outline buttons with an icon and text */
.btn-tool {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.btn-tool.btn-danger-tool {
    --bs-btn-color: var(--bs-danger-text-emphasis);
}

.btn-primary, .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.btn .material-symbols,
.btn .app-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: #2b5f8e;
    border-color: #2b5f8e;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle);
    --bs-dropdown-link-active-color: var(--bs-primary-text-emphasis);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    box-shadow: var(--app-shadow);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dropdown-item .material-symbols,
.dropdown-item .app-icon {
    font-size: 1.125rem;
    color: var(--app-icon);
}

.dropdown-item.text-danger .material-symbols {
    color: inherit;
}

/* a form inside a menu (publish, hide, delete): its button looks like the other entries */
.dropdown-menu form {
    display: block;
}

.dropdown-menu form .btn {
    width: 100%;
    text-align: start;
}

/* ---- Icon buttons (UX.md, Buttons and Touch targets) ----
   Every icon-only button has a tooltip (title) and an aria-label. 32 px with a mouse, 44 px on touch screens. */
:root {
    --app-icon-btn: 2rem;
    --app-icon-gap: .25rem;
}

@media (pointer: coarse) {
    :root {
        --app-icon-btn: 2.75rem;
        --app-icon-gap: .5rem;
    }
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-btn);
    height: var(--app-icon-btn);
    padding: 0;
    border: 0;
    border-radius: .375rem;
    color: var(--bs-body-color);
    background: transparent;
}

.btn-icon:hover,
.btn-icon:focus-visible,
.btn-icon[aria-expanded=true] {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}

.btn-icon .material-symbols {
    font-size: 1.25rem;
}

/* the ⋮ menu: no caret, the icon says it */
.btn-icon.dropdown-toggle::after {
    display: none;
}

/* the back button of the page header: an outlined square */
.btn-icon.btn-back {
    border: 1px solid var(--bs-border-color);
}

/* on touch screens usuń (and other destructive actions) is only in the ⋮ menu (UX.md, Buttons) */
@media (pointer: coarse) {
    .only-mouse {
        display: none !important;
    }
}

@media not (pointer: coarse) {
    .only-touch {
        display: none !important;
    }
}

/* ---- Yes/no and value icons (UX.md, Yes/no values) ----
   The custom icons (common/_icon.html.twig) take the size and colour of the text, like the Material Symbols. */
.app-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.yesno .material-symbols {
    font-size: inherit;
}

.material-symbols {
    vertical-align: middle;
}

.value-icon {
    font-size: 1.125rem;
    color: var(--app-icon);
}

.yesno {
    position: relative;
    display: inline-flex;
    font-size: 1.25rem;
}

.yesno-yes {
    color: var(--app-icon-on);
}

.yesno-ok {
    color: var(--app-icon-ok);
}

.yesno-no {
    color: var(--app-icon-off);
}

/* nie: the icon crossed by a slash, unless it has an _off variant of its own */
.yesno-no.yesno-slash::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8%;
    width: 2px;
    height: 84%;
    background: currentColor;
    border-radius: 1px;
    transform: translateX(-50%) rotate(-45deg);
}

/* ---- Record lists (common/_list.html.twig; UX.md, Lists of records) ----
   One record per rounded row. No column headers: every value has a small grey icon, the column name is its tooltip and
   is read out before the value. The title link is stretched over the row, so the whole row opens the record; buttons
   and toggles sit above it. Small screens: cards whose values wrap, with an action strip at the bottom. From lg up:
   one line per record; the columns line up because every row has the same cells with the same flex bases, and the
   action cell is as wide as --list-slots buttons. */
.list-rows {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.list-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: 1rem 1rem .5rem;
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .625rem;
}

.list-row:has(.stretched-link):hover {
    background: var(--app-row-hover-bg);
    border-color: var(--app-row-hover-border);
}

.list-row:not(:has(.lc-actions)) {
    padding-bottom: 1rem;
}

.lc {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lc-date {
    white-space: nowrap;
}

.lc:empty, .lc-blank {
    display: none;
}

.lc-icon {
    flex: none;
    font-size: 1.125rem;
    color: var(--app-icon);
    cursor: default;
}

/* the record's name leads the card, the number in front of it is only a muted counter */
.lc-title {
    display: block;
    flex: 1 1 100%;
    padding-right: 2rem;
    font-weight: 600;
}

.lc-title .stretched-link,
.lc-title .lc-title-text {
    color: var(--bs-body-color);
    text-decoration: none;
}

.lc-title .stretched-link:hover {
    text-decoration: underline;
}

.lc-title .badge {
    margin-left: .35rem;
    vertical-align: middle;
}

.lc-no {
    color: var(--bs-secondary-color);
}

/* everything that can be clicked inside a row lies above the stretched title link */
.list-row .btn,
.list-row form,
.list-row select,
.list-row .dropdown,
.list-row .lc-toggle,
.list-row a:not(.stretched-link) {
    position: relative;
    z-index: 2;
}

/* and so do the value icons, so the mouse reaches their tooltip (the column name, or the column and the yes/no answer);
   a click on one of them does not open the row */
.list-row .lc-icon,
.list-row .yesno {
    position: relative;
    z-index: 2;
}

/* an open ⋮ menu lies above the buttons of the rows below it */
.list-row .dropdown:has(.dropdown-menu.show) {
    z-index: 3;
}

.lc-chevron {
    position: absolute;
    top: .9rem;
    right: .75rem;
    color: var(--app-icon);
    pointer-events: none;
}

/* the registrations of an entry: the name opens them under the row */
.lc-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    text-align: start;
}

.lc-toggle::after {
    font-family: "Material Symbols";
    content: "expand_more";
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-primary-text-emphasis);
    transition: transform .15s;
}

.lc-toggle[aria-expanded=true]::after {
    transform: rotate(180deg);
}

@media (pointer: coarse) {
    .lc-toggle {
        min-height: 2.75rem;
        padding: 0 .75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 1.375rem;
    }
}

/* cards: the actions in a strip at the bottom, separated by a line, so a tap there is clearly not "open" */
.lc-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-icon-gap);
    margin-top: .25rem;
    padding-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
}

/* an action slot without its button keeps its place, so the icons stay in line */
.lc-slot {
    display: inline-block;
    width: var(--app-icon-btn);
}

.list-empty {
    color: var(--bs-secondary-color);
    padding-bottom: 1rem;
}

/* the totals under the columns they sum: no card */
.list-row.list-summary {
    background: transparent;
    border-color: transparent;
    font-weight: 700;
}

.list-summary .lc-actions {
    border-top: 0;
}

/* the records shown under a record (tournament entries: their registrations), one level indented */
.list-detail {
    padding-left: 1rem;
}

.list-detail .list-rows {
    gap: .5rem;
    margin: 0;
}

.list-detail .list-row {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme=dark] .list-detail .list-row {
    background: var(--bs-body-bg);
}

@media (min-width: 992px) {
    .list-rows {
        gap: .5rem;
    }

    .list-row {
        flex-wrap: nowrap;
        gap: 0;
        min-height: 3rem;
        padding: .25rem 2.25rem .25rem .5rem;
    }

    .list-row:not(:has(.lc-actions)) {
        padding-bottom: .25rem;
    }

    .lc {
        flex: 1 1 0;
        padding: .25rem .5rem;
    }

    .lc:empty, .lc-blank {
        display: inline-flex;
    }

    .lc-title {
        flex: 2 1 0;
        padding-right: .5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .lc-no {
        flex: 0 0 2.5rem;
    }

    /* short numbers and times */
    .lc-narrow {
        flex: 0 0 6.5rem;
    }

    .lc-date {
        flex: 0 0 8rem;
    }

    /* a yes/no icon */
    .lc-flag {
        flex: 0 0 2.75rem;
        justify-content: center;
    }

    .lc-chevron {
        top: 50%;
        transform: translateY(-50%);
    }

    .lc-actions {
        flex: 0 0 calc(var(--list-slots, 3) * (var(--app-icon-btn) + var(--app-icon-gap)) + .5rem);
        flex-wrap: nowrap;
        margin: 0;
        padding: 0 0 0 .5rem;
        border-top: 0;
    }

    .list-row.list-summary {
        min-height: 2.5rem;
    }

    .list-empty {
        padding: .75rem 1rem;
    }

    .list-detail {
        padding-left: 3rem;
    }
}

@media (min-width: 992px) and (pointer: coarse) {
    .list-row {
        min-height: 3.75rem;
    }
}

/* columns of secondary detail, left out between lg and xxl where a wide list gets tight; the cards on small screens and
   the record page still show them (UX.md, Screen sizes: M) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .list-rows .lc-mid {
        display: none !important;
    }
}

@media print {
    .list-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid darkgray !important;
        border-radius: 0 !important;
        background: none !important;
    }

    .lc {
        flex: 1 1 0;
        padding: 0.1cm !important;
    }

    .lc-chevron, .lc-actions {
        display: none !important;
    }
}

/* ---- Details of a record (common/_details.html.twig; UX.md, Details of a record) ----
   A grid of icon, label and value in a card instead of a two-column table. */
.details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .625rem;
}

@media (min-width: 768px) {
    .details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.detail {
    position: relative;
    margin: 0;
    padding-left: 2rem;
    min-width: 0;
}

.detail dt {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* the icon of the field, in front of the label and the value */
.detail dt > .material-symbols,
.detail dt > .app-icon {
    position: absolute;
    left: 0;
    top: .15rem;
    font-size: 1.25rem;
    color: var(--app-icon);
}

.detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.detail-wide {
    grid-column: 1 / -1;
}

/* ---- Layout (web pages; WCAG 2.2 AA) ----
   Sizes are in rem, so text can be resized to 200% (1.4.4). Small screens: the menu collapses (base.html.twig) and wide
   tables scroll inside .table-responsive, never the page (1.4.10 Reflow at 320 CSS px). From lg up the pages are denser,
   from 1600px wider. Interactive targets stay at least 24x24 px (2.5.8), 44x44 px on touch screens. */

/* Focus: a solid 2px outline, at least 3:1 against the background (2.4.7, 1.4.11); Bootstrap's shadow is too faint. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.table-responsive:focus-visible {
    outline: 2px solid var(--app-focus) !important;
    outline-offset: 2px;
}

/* the skip link's target, focused by the browser after the jump */
main:focus {
    outline: none;
}

.skip-link:focus {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-link-color);
    border: 2px solid var(--app-focus);
    border-radius: .25rem;
}

main {
    flex: 1;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* ---- Header (base.html.twig; UX.md, Header) ---- */
.site-header {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.site-header .navbar {
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: var(--bs-body-color);
    --bs-navbar-hover-color: var(--bs-body-color);
    --bs-navbar-active-color: var(--bs-primary-text-emphasis);
}

.site-header .container {
    gap: .25rem;
}

.site-header .navbar-brand {
    margin-right: auto;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.site-header .navbar-toggler {
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
}

.site-nav .nav-link,
.site-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .5rem;
}

.site-nav .nav-link .material-symbols {
    font-size: 1.25rem;
    color: var(--app-icon);
}

.site-nav .nav-link.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.site-nav .nav-link.active .material-symbols {
    color: inherit;
}

.site-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.site-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .25rem .75rem .25rem .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    color: var(--bs-body-color);
}

.site-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .75rem;
    font-weight: 700;
}

/* a long e-mail address is cut with an ellipsis instead of widening the menu */
.site-account-email {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.site-account-header {
    color: var(--bs-secondary-color);
}

.site-flat-heading {
    display: none;
}

.site-theme-options .dropdown-item.active .material-symbols {
    color: inherit;
}

/* small screens: the menu opens over the page; the groups (Zarządzanie, Motyw, the account) are shown open under a
   small heading instead of as menus */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        margin: .5rem -.75rem 0;
        padding: .5rem .75rem 1rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .site-nav .nav-link,
    .site-flat .dropdown-item {
        min-height: 3rem;
        padding: .5rem .75rem;
    }

    .site-flat-toggle {
        display: none !important;
    }

    .site-flat .dropdown-menu {
        display: block;
        position: static;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .site-flat-heading {
        display: block;
        margin-top: .75rem;
        padding: .5rem .75rem .25rem;
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
    }

    .site-tools {
        display: block;
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--bs-border-color);
    }

    /* the theme: a three-part switch */
    .site-theme-options {
        display: flex;
        margin: 0 .25rem;
        padding: .2rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
    }

    .site-theme-options .dropdown-item {
        flex: 1 1 0;
        justify-content: center;
        min-height: 2.75rem;
        border-radius: .375rem;
    }

    .site-account-header {
        padding-top: 1rem;
    }

    .site-account-email {
        max-width: 100%;
    }

    .site-guest {
        padding: .75rem .25rem 0;
    }
}

@media (min-width: 992px) {
    .site-header .navbar-brand {
        margin-right: 1.5rem;
    }

    .site-header .navbar-collapse {
        order: 2;
    }

    .site-nav {
        gap: .25rem;
    }

    .site-nav .nav-link,
    .site-nav .dropdown-toggle {
        padding: .45rem .75rem;
    }

    .site-tools {
        margin-left: auto;
    }

    .site-help {
        order: 3;
    }

    .site-theme-options .dropdown-item {
        min-width: 10rem;
    }
}

@media (pointer: coarse) and (min-width: 992px) {
    .site-nav .nav-link,
    .site-nav .dropdown-toggle {
        min-height: 2.75rem;
    }

    .site-account-toggle {
        min-height: 2.75rem;
    }
}

/* ---- Footer ---- */
.site-footer {
    padding: 1.25rem 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.site-footer-about {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-links a {
    display: inline-block;
    padding: .25rem 0;
}

@media (pointer: coarse) {
    .site-footer-links a {
        padding: .65rem 0;
    }
}

.form-narrow {
    max-width: 48rem;
}

/* ---- Page header (common/_header.html.twig; UX.md, Page header) ----
   Breadcrumb, back button, title; the page actions on the right; the tools of the page below. */
.breadcrumb {
    margin-bottom: .5rem;
    font-size: .875rem;
}

/* a short crumb (Pomoc, Sędziowie) is still a 24 px target (WCAG 2.2, 2.5.8) */
.breadcrumb-item > a {
    display: inline-block;
    min-height: 1.5rem;
    line-height: 1.5rem;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.page-header h1, .page-header h2, .page-header h3 {
    margin: 0;
    margin-right: .5rem;
    overflow-wrap: anywhere;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-icon-gap);
    margin-left: auto;
}

.page-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.page-tools .page-action-wide {
    display: none !important;
}

@media (min-width: 1400px) {
    .page-tools .page-action-wide {
        display: inline-flex !important;
    }
}

h2 {
    margin-top: .5rem;
}

@media (min-width: 992px) {
    h1, .h1 {
        font-size: 1.75rem;
    }

    h2, .h2 {
        font-size: 1.4rem;
    }

    h3, .h3 {
        font-size: 1.2rem;
    }

    .table > :not(caption) > * > * {
        padding: .3rem .5rem;
    }

    /* the size of .btn-sm; with the 24px icons the buttons stay above 24x24 px */
    .table .btn {
        padding: .25rem .5rem;
        font-size: .875rem;
        border-radius: .2rem;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1560px;
    }
}

/* tables that stay tables (scores, summaries): on the page background they get a card */
.table {
    --bs-table-bg: var(--app-surface);
}

/* the help pages (docs/help): the table of contents in the left column of large screens, in an overlay on small ones.
   The colours are the theme variables, so the help follows the light and the dark theme. */
.help-toc {
    font-size: .95rem;
}

/* large screens: stays in view while the page scrolls, with its own scroll */
.help-toc-panel {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color);
    padding-right: 1rem;
}

.help-toc a {
    display: block;
    padding: .2rem .5rem;
    border-left: 3px solid transparent;
    color: var(--bs-body-color);
    text-decoration: none;
}

.help-toc a:hover,
.help-toc a:focus-visible {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* the current topic: a bar on its left */
.help-toc a.active {
    border-left-color: var(--bs-primary-text-emphasis);
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

.help-toc-home {
    font-weight: 600;
    margin-bottom: .5rem;
}

.help-toc-group {
    margin-bottom: .5rem;
}

.help-toc-chapter {
    padding: .35rem .5rem;
    font-weight: 600;
    cursor: pointer;
}

.help-toc-sections {
    margin-left: .75rem;
    font-size: .875rem;
}

.help-toc-sections a {
    color: var(--bs-secondary-color);
}

.help-toc-others {
    margin: 1rem 0 .5rem;
    padding: .75rem .5rem 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

/* the text: lines of about 70 characters, more space between lines, paragraphs and sections */
.help-content {
    max-width: 44rem;
    line-height: 1.65;
}

.help-content > p:first-child {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
}

.help-content p,
.help-content ul,
.help-content ol {
    margin-bottom: 1.1rem;
}

.help-content li + li {
    margin-top: .35rem;
}

.help-content h2 {
    font-size: 1.5rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.help-content h3 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
}

/* names of buttons, fields and labels on screen (written **bold** in the help files): a small framed label */
.help-content strong {
    display: inline-block;
    padding: 0 .35em;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-tertiary-bg);
    font-size: .9em;
    font-weight: 500;
    line-height: 1.45;
}

/* numbered steps: the number in a circle */
.help-content ol {
    list-style: none;
    counter-reset: help-step;
    padding-left: 2.5rem;
}

.help-content ol > li {
    position: relative;
    counter-increment: help-step;
}

.help-content ol > li::before {
    content: counter(help-step);
    position: absolute;
    left: -2.5rem;
    top: .1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #2b5f8e;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.75rem;
    text-align: center;
}

/* code and notations: neutral, not Bootstrap's pink */
.help-content code {
    padding: .1em .35em;
    border-radius: .25rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: .95em;
}

.help-content pre {
    padding: .75rem 1rem;
    border-radius: .25rem;
    background: var(--bs-secondary-bg);
}

.help-content pre code {
    padding: 0;
    background: none;
}

/* tips and warnings: a quote starting with **Wskazówka:** or **Uwaga:** (HelpRenderer adds the class) */
.help-callout {
    margin: 0 0 1.1rem;
    padding: .75rem 1rem;
    border-left: 4px solid var(--bs-primary-text-emphasis);
    border-radius: .25rem;
    background: var(--bs-primary-bg-subtle);
}

.help-callout-warning {
    border-left-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
}

.help-callout > :last-child {
    margin-bottom: 0;
}

/* the word "Uwaga:" or "Wskazówka:" is plain bold, not a framed label */
.help-callout > p:first-child > strong:first-child {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1em;
    font-weight: 700;
}

.help-content table {
    margin-bottom: 1.25rem;
}

.help-content th,
.help-content td {
    padding: .5rem .75rem;
}

/* a second, grey line of the title (the full name of a club) */
.lc-subtitle {
    display: block;
    font-weight: 400;
    font-size: .875rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .lc-subtitle.lc-mid {
        display: none;
    }
}

/* ---- Entry form and confirmation (tournament_entry/form.html.twig, confirmation.html.twig; UX.md, Entry form) ----
   Two cards (Zawodnik, Konkurencje) and the summary: on the right from 992 px, a bar at the bottom below. */
.entry-tournament {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: -.25rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.entry-tournament li,
.entry-competition-meta li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.entry-tournament .app-icon,
.entry-tournament .material-symbols,
.entry-competition-meta .app-icon,
.entry-competition-meta .material-symbols {
    font-size: 1.125rem;
    color: var(--app-icon);
}

.entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.entry-card,
.entry-summary {
    padding: 1rem;
    background: var(--app-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .625rem;
}

.entry-card + .entry-card {
    margin-top: 1rem;
}

.entry-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
}

.entry-card-head h2,
.entry-summary-title {
    margin: 0;
    font-size: 1.25rem;
}

.entry-hint {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.entry-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}

@media (min-width: 768px) {
    .entry-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entry-field-wide {
        grid-column: 1 / -1;
    }
}

.entry-competition {
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}

.entry-competition + .entry-competition {
    margin-top: .5rem;
}

.entry-competition-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.25rem;
}

.entry-competition-check {
    flex: 1 1 16rem;
    margin: 0;
}

.entry-competition-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
}

.entry-competition-check .form-check-label {
    padding-left: .35rem;
}

.entry-competition.is-selected .form-check-label {
    font-weight: 600;
}

.entry-competition-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.entry-competition-status {
    display: inline-flex;
    gap: .5rem;
}

.entry-badge-registered {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
}

.entry-withdraw {
    font-size: .875rem;
    color: var(--bs-danger-text-emphasis);
}

.entry-competition-cost {
    margin-left: auto;
    font-weight: 600;
}

.entry-competition-choices {
    margin-top: .75rem;
}

.entry-choice {
    margin: 0 0 .75rem;
}

.entry-choice legend {
    margin-bottom: .35rem;
    font-size: .9375rem;
    font-weight: 500;
}

.entry-shifts,
.entry-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* a shift: a button with the time and the free slots */
.entry-chip {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--app-row-hover-bg);
    --bs-btn-hover-border-color: var(--app-row-hover-border);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2b5f8e;
    --bs-btn-active-border-color: #2b5f8e;
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-secondary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-disabled-opacity: 1;
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    min-width: 9rem;
    min-height: 2.5rem;
}

.btn-check:checked + .entry-chip {
    color: #fff;
}

.entry-chip span {
    font-size: .8125rem;
}

.btn-check:disabled + .entry-chip {
    border-style: dashed;
}

.entry-chip-current {
    --bs-btn-border-color: var(--app-icon-ok);
}

.entry-move {
    margin: .5rem 0 0;
    padding: .35rem .75rem;
    font-size: .875rem;
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: .375rem;
}

/* club gun and ammunition: a radio option with its price */
.entry-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .35rem .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    cursor: pointer;
}

.entry-option .form-check-input {
    margin: 0;
}

.entry-option:has(:checked) {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-text-emphasis);
    font-weight: 500;
}

.entry-option-cost {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

@media (pointer: coarse) {
    .entry-chip,
    .entry-option {
        min-height: 2.75rem;
    }
}

.entry-summary-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1rem;
    margin: .75rem 0 0;
}

.entry-summary-lines dt {
    font-weight: 400;
}

.entry-summary-lines dd {
    margin: 0;
    text-align: right;
}

.entry-summary-lines .entry-summary-extra {
    padding-left: 1rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.entry-summary-changes {
    margin-top: 1rem;
}

.entry-summary-changes h3 {
    margin: 0 0 .35rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.entry-summary-changes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.entry-change-withdrawal {
    color: var(--bs-danger-text-emphasis);
}

.entry-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.entry-cancel {
    text-align: center;
    font-size: .875rem;
}

@media (min-width: 992px) {
    .entry-layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .entry-summary {
        position: sticky;
        top: 1rem;
    }

    .entry-summary-bar {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .entry-submit {
        width: 100%;
    }
}

/* phones and tablets: the total and the button stay at the bottom of the screen */
@media (max-width: 991.98px) {
    .entry-summary {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -.75rem;
        padding: .75rem;
        border-radius: 0;
        border-width: 1px 0 0;
        box-shadow: var(--app-shadow);
    }

    .entry-summary-title,
    .entry-summary-lines,
    .entry-summary-changes {
        display: none;
    }

    .entry-summary-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem 1rem;
    }

    .entry-summary-total {
        flex-direction: column;
        gap: 0;
        margin-right: auto;
    }

    .entry-summary-total span {
        font-size: .8125rem;
        font-weight: 400;
        color: var(--bs-secondary-color);
    }

    .entry-submit {
        min-height: 3rem;
        padding-inline: 1.5rem;
    }

    /* the back button of the page header cancels; the bar stays one line */
    .entry-cancel {
        display: none;
    }
}

/* the confirmation: the total under the list of competitions */
.entry-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 1rem;
    margin: -.75rem 0 1.5rem;
    padding-right: 1rem;
}

.entry-total span {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.entry-total strong {
    font-size: 1.0625rem;
}