/* ============================================================
   meet-ui.css  --  MeetPro dynamic results UI  (v1.5)
   ------------------------------------------------------------
   Collapsible event cards, search + filter chips, day/session
   tabs, per-event export buttons and the medal table.

   Uses ONLY the existing theme variables declared in style.css:
     --primary  #F99E1F   --secondary  #101820
     --secondary-2 #182738  --card --border --muted --shadow
   Event banners stay teal, heat rows stay beige.
   Load AFTER css/style.css.
   ============================================================ */

/* ---------- local fallbacks (style.css declares these on body) */
.mp-ui,
.mp-toolbar,
.mp-event,
.mp-medals {
    --mp-primary: var(--primary, #F99E1F);
    --mp-secondary: var(--secondary, #101820);
    --mp-secondary-2: var(--secondary-2, #182738);
    --mp-teal-1: #00a9ac;
    --mp-teal-2: #0081a3;
    --mp-teal-3: #006b92;
    --mp-beige: #fff8e7;
    --mp-beige-line: #fde68a;
    --mp-beige-text: #9a6700;
    --mp-card: var(--card, #ffffff);
    --mp-border: var(--border, #e5e7eb);
    --mp-muted: var(--muted, #6b7280);
}

/* ============================================================
   1. TOOLBAR  (search + chips + counter)
   ============================================================ */
.mp-toolbar {
    background: linear-gradient(135deg, var(--mp-secondary) 0%, var(--mp-secondary-2) 55%, #1f3248 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: 14px 16px;
    margin: 0 0 18px;
    position: relative;
    overflow: hidden;
}

.mp-toolbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(135deg, var(--mp-teal-1) 0%, var(--mp-teal-2) 50%, var(--mp-teal-3) 100%);
}

.mp-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mp-toolbar-row + .mp-toolbar-row {
    margin-top: 10px;
}

/* --- search box --- */
.mp-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.mp-search input {
    width: 100%;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 38px 11px 40px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.mp-search input::placeholder {
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
}

.mp-search input:focus {
    border-color: rgba(249, 158, 31, .65);
    box-shadow: 0 0 0 3px rgba(249, 158, 31, .18);
    background: rgba(0, 0, 0, .45);
}

.mp-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    pointer-events: none;
}

.mp-search-icon::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    background: rgba(255, 255, 255, .55);
    transform: rotate(45deg);
    border-radius: 2px;
}

.mp-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: none;
    padding: 0;
}

.mp-search.has-value .mp-search-clear {
    display: block;
}

.mp-search-clear:hover {
    background: var(--mp-primary);
    color: #111;
}

/* --- filter chips --- */
.mp-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mp-chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    white-space: nowrap;
}

.mp-chip:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(249, 158, 31, .45);
    color: #fff;
}

.mp-chip.is-active {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    border-color: transparent;
    color: #111;
    box-shadow: 0 6px 16px rgba(249, 158, 31, .28);
}

.mp-chip-sep {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .18);
    margin: 0 4px;
    flex: 0 0 auto;
}

/* --- counter --- */
.mp-count {
    margin-left: auto;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .10);
}

.mp-count b {
    color: var(--mp-primary);
}

/* --- global tool buttons (expand / collapse all) --- */
.mp-tool {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
    border-radius: 10px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.mp-tool:hover {
    background: var(--mp-primary);
    border-color: transparent;
    color: #111;
}

/* ============================================================
   2. DAY / SESSION TABS
   ============================================================ */
.mp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.mp-tab {
    background: linear-gradient(135deg, rgba(16, 24, 32, .70) 0%, rgba(24, 39, 56, .70) 55%, rgba(31, 50, 72, .70) 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    transition: background .2s, color .2s, border-color .2s, transform .15s;
}

.mp-tab:hover {
    border-color: rgba(249, 158, 31, .35);
    color: #fff;
}

.mp-tab.is-active {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    color: #111;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(249, 158, 31, .28);
}

.mp-tab .mp-tab-sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: .75;
    letter-spacing: .3px;
}

.mp-panel[hidden] {
    display: none !important;
}

/* the session heading is already printed on its tab */
.mp-panel .mp-tab-src {
    display: none;
}

/* ============================================================
   3. EVENT CARDS
   ============================================================ */
.mp-event {
    background: var(--mp-card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    margin: 0 0 14px;
    overflow: hidden;
    position: relative;
}

.mp-event::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(135deg, var(--mp-teal-1) 0%, var(--mp-teal-2) 50%, var(--mp-teal-3) 100%);
}

.mp-event[hidden] {
    display: none !important;
}

/* --- head (the clickable bar) --- */
.mp-event-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 14px 46px 14px 16px;
    cursor: pointer;
    position: relative;
}

.mp-event-head:hover {
    background: #f8fafc;
}

.mp-ev-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--mp-secondary);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

.mp-ev-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--mp-secondary);
    line-height: 1.25;
    flex: 1 1 240px;
    min-width: 0;
}

/* --- badges --- */
.mp-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
}

.mp-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mp-badge-round {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    color: #111;
}

.mp-badge-gender {
    background: var(--mp-secondary);
    color: #fff;
}

.mp-badge-type {
    background: #e6f7f7;
    color: var(--mp-teal-3);
    border-color: rgba(0, 169, 172, .35);
}

.mp-badge-div {
    background: var(--mp-beige);
    color: var(--mp-beige-text);
    border-color: var(--mp-beige-line);
}

/* --- leader line --- */
.mp-leader {
    flex: 1 1 100%;
    font-size: 13.5px;
    color: var(--mp-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

.mp-leader .mp-leader-medal {
    font-size: 15px;
    line-height: 1;
}

.mp-leader .mp-leader-name {
    color: #111;
    font-weight: 800;
}

.mp-leader .mp-leader-mark {
    margin-left: auto;
    color: var(--mp-teal-3);
    font-weight: 800;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    background: #e6f7f7;
    border-radius: 8px;
    padding: 2px 9px;
}

.mp-leader img.team-flag {
    height: 12px;
    width: auto;
    vertical-align: baseline;
}

/* --- chevron --- */
.mp-chev {
    position: absolute;
    right: 16px;
    top: 20px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--mp-muted);
    border-bottom: 2px solid var(--mp-muted);
    transform: rotate(45deg);
    transition: transform .22s ease;
}

.mp-event.is-open .mp-chev {
    transform: rotate(-135deg);
}

/* --- body --- */
.mp-event-body {
    border-top: 1px solid var(--mp-border);
    padding: 12px 14px 16px;
}

.mp-event:not(.is-open) .mp-event-body {
    display: none;
}

.mp-event-body > .h3,
.mp-event-body h5.event-start-list-hdr {
    display: none; /* the card head already shows the event name */
}

.mp-event-body h4.round-results-hdr {
    color: var(--mp-secondary);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 14px 0 8px;
    padding: 8px 12px;
    background: var(--mp-beige);
    border: 1px solid var(--mp-beige-line);
    border-left: 4px solid var(--mp-primary);
    border-radius: 8px;
}

.mp-event-body h4.heat-results-hdr {
    color: var(--mp-beige-text);
    font-size: 14px;
    font-weight: 700;
    margin: 14px 0 6px;
    padding: 7px 12px;
    background: var(--mp-beige);
    border: 1px solid var(--mp-beige-line);
    border-radius: 8px;
}

/* --- per event export buttons --- */
.mp-ev-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.mp-ev-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid var(--mp-border);
    color: #111;
    border-radius: 10px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.mp-ev-btn:hover {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    border-color: transparent;
    color: #111;
}

.mp-ev-btn .mp-ev-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--mp-teal-2);
    flex: 0 0 auto;
}

.mp-ev-btn[data-mp-act="pdf"] .mp-ev-dot { background: #d64545; }
.mp-ev-btn[data-mp-act="xls"] .mp-ev-dot { background: #1d7a45; }
.mp-ev-btn[data-mp-act="print"] .mp-ev-dot { background: var(--mp-secondary); }

/* v3.6 - the PDF button while jsPDF + html2canvas are being fetched.
   They are no longer loaded on every page; the first click pulls them
   from the CDN, which takes a moment on a slow phone connection. */
.mp-ev-btn.is-busy {
    opacity: .65;
    cursor: progress;
}
.mp-ev-btn.is-busy .mp-ev-dot {
    animation: mp-ev-pulse 900ms ease-in-out infinite;
}
@keyframes mp-ev-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* --- empty state --- */
.mp-empty {
    background: var(--mp-card);
    border: 1px dashed var(--mp-border);
    border-radius: 14px;
    padding: 34px 18px;
    text-align: center;
    color: var(--mp-muted);
    font-size: 14.5px;
    font-style: italic;
}

/* ============================================================
   4. EVENT INDEX (link lists on index / events pages)
   ============================================================ */
tr.mp-row-hidden {
    display: none !important;
}

.mp-idx-hidden {
    display: none !important;
}

/* ============================================================
   5. MEDAL TABLE
   ============================================================ */
.mp-medals {
    background: var(--mp-card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    margin: 0 0 28px;
    overflow: hidden;
    position: relative;
}

.mp-medals::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(135deg, var(--mp-primary) 0%, #ffbe45 50%, var(--mp-primary) 100%);
}

.mp-medals-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}

.mp-medals-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--mp-secondary);
    display: flex;
    align-items: center;
    gap: 9px;
}

.mp-medals-title::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd75e, var(--mp-primary));
    box-shadow: 0 0 0 3px rgba(249, 158, 31, .22);
    flex: 0 0 auto;
}

.mp-medals-sub {
    color: var(--mp-muted);
    font-size: 12.5px;
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}

.mp-medals-refresh {
    background: var(--mp-secondary);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.mp-medals-refresh:hover {
    background: var(--mp-primary);
    color: #111;
}

.mp-medals-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 14px;
}

.mp-mchip {
    background: #f1f5f9;
    border: 1px solid var(--mp-border);
    color: #334155;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.mp-mchip:hover {
    border-color: rgba(249, 158, 31, .5);
    color: #111;
}

.mp-mchip.is-active {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    border-color: transparent;
    color: #111;
}

.mp-medals-body {
    padding: 0 14px 16px;
}

table.mp-medals-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--mp-card);
}

table.mp-medals-table thead th {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    color: #111;
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 11px 10px;
    text-align: center;
    border: none;
}

table.mp-medals-table thead th.mp-col-team {
    text-align: left;
}

table.mp-medals-table tbody td {
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--mp-border);
    font-size: 14.5px;
    color: #111;
    vertical-align: middle;
}

table.mp-medals-table tbody tr:nth-of-type(odd) > td {
    background: #f8fafc;
}

table.mp-medals-table tbody tr.mp-medal-row:hover > td {
    background: #eef4fb;
    cursor: pointer;
}

table.mp-medals-table td.mp-col-rank {
    font-weight: 800;
    color: var(--mp-muted);
    width: 56px;
}

table.mp-medals-table td.mp-col-team {
    text-align: left;
    font-weight: 800;
}

table.mp-medals-table td.mp-col-team img.team-flag {
    height: 16px;
    width: auto;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

table.mp-medals-table td.mp-col-total {
    font-weight: 800;
    background: rgba(249, 158, 31, .10) !important;
}

.mp-medal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    color: #3b2f0b;
}

.mp-medal-num.g { background: linear-gradient(135deg, #ffe08a, #f0b429); }
.mp-medal-num.s { background: linear-gradient(135deg, #e9edf2, #c3cbd6); color: #33383f; }
.mp-medal-num.b { background: linear-gradient(135deg, #f0c49b, #cd7f32); color: #4a2c10; }
.mp-medal-num.zero { background: #f1f5f9; color: #b6bcc4; }

/* rank 1-3 highlight */
table.mp-medals-table tbody tr.mp-rank-1 > td.mp-col-rank { color: #b8860b; }
table.mp-medals-table tbody tr.mp-rank-2 > td.mp-col-rank { color: #7c8794; }
table.mp-medals-table tbody tr.mp-rank-3 > td.mp-col-rank { color: #a8642c; }

/* details row */
tr.mp-medal-detail > td {
    background: #fff8e7 !important;
    text-align: left !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--mp-beige-line) !important;
}

.mp-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px 18px;
}

.mp-detail-list li {
    font-size: 13px;
    color: #4a3b1a;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.mp-detail-list li .mp-d-medal {
    flex: 0 0 auto;
}

.mp-detail-list li .mp-d-ath {
    font-weight: 800;
    color: #111;
}

/* progress / status */
.mp-medals-status {
    padding: 26px 18px;
    text-align: center;
    color: var(--mp-muted);
    font-size: 14px;
    font-style: italic;
}

.mp-progress {
    height: 6px;
    border-radius: 999px;
    background: #eef2f6;
    overflow: hidden;
    margin: 12px auto 0;
    max-width: 320px;
}

.mp-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    transition: width .25s ease;
}

.mp-medals-note {
    padding: 10px 18px 16px;
    color: var(--mp-muted);
    font-size: 12px;
    line-height: 1.6;
    border-top: 1px solid var(--mp-border);
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .mp-toolbar { padding: 12px; border-radius: 12px; }
    .mp-count { margin-left: 0; }
    .mp-chip { padding: 6px 12px; font-size: 12px; }
    .mp-event-head { padding: 12px 38px 12px 12px; gap: 8px; }
    .mp-ev-name { font-size: 15.5px; flex-basis: 100%; }
    .mp-leader { font-size: 12.5px; flex-wrap: wrap; }
    .mp-leader .mp-leader-mark { margin-left: 0; }
    .mp-event-body { padding: 10px 8px 14px; }
    .mp-tab { padding: 8px 14px; font-size: 13px; }
    .mp-medals-head { padding: 14px 12px 10px; }
    .mp-medals-sub { margin-left: 0; text-align: left; flex-basis: 100%; }
    .mp-medals-filters { padding: 0 12px 12px; }
    .mp-medals-body { padding: 0 8px 12px; }
    table.mp-medals-table tbody td,
    table.mp-medals-table thead th { padding: 8px 6px; font-size: 13px; }
    table.mp-medals-table td.mp-col-rank { width: 38px; }
}

/* ============================================================
   7. PRINT  --  print one event only, or the whole page
   ============================================================ */
@media print {
    .mp-toolbar,
    .mp-tabs,
    .mp-ev-tools,
    .mp-chev,
    .mp-medals-filters,
    .mp-medals-refresh,
    .mp-empty {
        display: none !important;
    }

    .mp-event,
    .mp-medals {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        break-inside: avoid;
    }

    .mp-event::before,
    .mp-medals::before {
        display: none !important;
    }

    /* every card is expanded on paper */
    .mp-event .mp-event-body {
        display: block !important;
    }

    .mp-panel[hidden] {
        display: block !important;
    }

    /* single event print (body gets .mp-printing-one) */
    body.mp-printing-one .mp-event:not(.mp-print-target),
    body.mp-printing-one .mp-medals,
    body.mp-printing-one .live-scoreboard-box,
    body.mp-printing-one nav.nav,
    body.mp-printing-one .topbar {
        display: none !important;
    }
}

/* ============================================================
   v1.6  --  always-visible summary + records strip, PDF doc,
             cross-event athlete search
   ============================================================ */

/* ---------- head tweaks ---------- */
.mp-event-head {
    padding-right: 92px;
}

.mp-toggle-label {
    position: absolute;
    right: 34px;
    top: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-event.is-open .mp-toggle-label {
    color: var(--mp-primary);
}

.mp-chev {
    top: 19px;
}

/* the old single-winner line is gone in v1.6 */
.mp-leader { display: none !important; }

/* ---------- always-visible block ---------- */
.mp-event-sub {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--mp-border);
    background: #fcfdfe;
}

/* ---------- records strip (right under the event name) ---------- */
.mp-records {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.mp-record {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    background: var(--mp-beige);
    border: 1px solid var(--mp-beige-line);
    border-radius: 9px;
    padding: 6px 11px;
    font-size: 12.5px;
    color: var(--mp-beige-text);
    line-height: 1.35;
}

.mp-rec-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid var(--mp-beige-line);
    border-radius: 6px;
    padding: 2px 7px;
}

.mp-rec-mark {
    font-weight: 800;
    color: #111;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
}

.mp-rec-who { color: #7a6430; font-weight: 600; }
.mp-rec-date { font-size: 11.5px; opacity: .85; }

/* MeetPro's own wide records table is replaced by the strip above */
table.records-table {
    width: auto;
    font-size: 12.5px;
}

table.records-table td {
    padding: 3px 10px !important;
    white-space: nowrap;
}

.mp-event-body table.records-table { display: none; }

/* ---------- summary table (every athlete) ---------- */
.mp-summary {
    margin: 0;
}

table.mp-summary-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--mp-card);
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    overflow: hidden;
}

table.mp-summary-table thead th {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    color: #111;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 9px 10px;
    text-align: left;
    border: none;
    white-space: nowrap;
}

table.mp-summary-table thead th.mp-c-pl,
table.mp-summary-table thead th.mp-c-pts { text-align: center; }
table.mp-summary-table thead th.mp-c-mark { text-align: right; }

table.mp-summary-table tbody td {
    padding: 8px 10px;
    border-top: 1px solid var(--mp-border);
    font-size: 14px;
    color: #111;
    vertical-align: middle;
}

table.mp-summary-table tbody tr:nth-of-type(odd) > td { background: #f8fafc; }

table.mp-summary-table td.mp-c-pl {
    text-align: center;
    font-weight: 800;
    width: 62px;
    white-space: nowrap;
}

.mp-pl-medal { margin-right: 3px; }

table.mp-summary-table td.mp-c-ath { font-weight: 700; }

table.mp-summary-table td.mp-c-team { white-space: nowrap; font-weight: 600; }

table.mp-summary-table td.mp-c-team img.team-flag {
    height: 14px;
    width: auto;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

table.mp-summary-table td.mp-c-mark {
    text-align: right;
    font-weight: 800;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    white-space: nowrap;
}

table.mp-summary-table td.mp-c-pts { text-align: center; font-weight: 700; color: var(--mp-muted); }
table.mp-summary-table td.mp-c-sec { font-size: 12px; color: var(--mp-muted); white-space: nowrap; }

table.mp-summary-table tr.mp-podium-1 > td { background: rgba(255, 215, 94, .22) !important; }
table.mp-summary-table tr.mp-podium-2 > td { background: rgba(203, 213, 225, .28) !important; }
table.mp-summary-table tr.mp-podium-3 > td { background: rgba(205, 127, 50, .16) !important; }

/* ---------- details area ---------- */
.mp-event-body {
    background: #fff;
}

.mp-event-body h4.heat-wind-hdr {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mp-teal-3);
    background: #e6f7f7;
    border: 1px solid rgba(0,169,172,.3);
    border-radius: 8px;
}

/* ---------- cross-event athlete search ---------- */
.mp-athletes {
    margin-top: 12px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 10px 12px;
    max-height: 340px;
    overflow-y: auto;
}

.mp-athletes[hidden] { display: none !important; }

.mp-ath-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mp-ath-title {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.mp-ath-count {
    margin-left: auto;
    color: var(--mp-primary);
    font-size: 12px;
    font-weight: 800;
}

.mp-ath-status {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-style: italic;
    padding: 8px 2px;
}

.mp-ath-list { display: flex; flex-direction: column; gap: 4px; }

a.mp-ath-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #e6edf3;
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s;
}

a.mp-ath-item:hover {
    background: rgba(249, 158, 31, .18);
    color: #fff;
    text-decoration: none;
}

.mp-ath-pl {
    flex: 0 0 auto;
    min-width: 34px;
    text-align: center;
    font-weight: 800;
    color: var(--mp-primary);
}

.mp-ath-name { font-weight: 800; flex: 1 1 160px; min-width: 0; }
.mp-ath-team { flex: 0 0 auto; opacity: .85; white-space: nowrap; }
.mp-ath-team img.team-flag { height: 12px; width: auto; vertical-align: -1px; }
.mp-ath-event { flex: 1 1 180px; opacity: .8; font-size: 12.5px; min-width: 0; }
.mp-ath-mark {
    flex: 0 0 auto;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    font-weight: 800;
    color: var(--mp-primary);
}

/* ---------- PDF document ---------- */
.mp-pdf-stage {
    position: fixed;
    left: -20000px;
    top: 0;
    width: 900px;
    z-index: -1;
}

.mp-pdf-doc {
    width: 900px;
    background: #fff;
    color: #111;
    padding: 26px 28px 20px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
}

.mp-pdf-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--mp-primary);
}

img.mp-pdf-logo { height: 74px; width: auto; flex: 0 0 auto; }

.mp-pdf-meta { flex: 1 1 auto; text-align: center; }
.mp-pdf-name { font-size: 24px; font-weight: 800; color: var(--mp-secondary); line-height: 1.2; }
.mp-pdf-town { font-size: 15px; font-weight: 700; color: #444; margin-top: 3px; }
.mp-pdf-date { font-size: 13px; color: #666; margin-top: 2px; }

.mp-pdf-event {
    font-size: 20px;
    font-weight: 800;
    color: var(--mp-secondary);
    margin: 16px 0 6px;
}

.mp-pdf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.mp-pdf-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid var(--mp-border);
    color: #334155;
}

.mp-pdf-doc .mp-records { margin-bottom: 14px; }

.mp-pdf-block { margin-bottom: 14px; }

.mp-pdf-doc table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 12.5px;
}

.mp-pdf-doc table th {
    background: linear-gradient(135deg, var(--mp-primary), #ffbe45);
    color: #111;
    padding: 7px 8px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
}

.mp-pdf-doc table td {
    padding: 6px 8px;
    border-top: 1px solid #e5e7eb;
}

.mp-pdf-doc h4 {
    font-size: 13px;
    font-weight: 800;
    margin: 12px 0 6px;
    padding: 6px 10px;
    background: #fff8e7;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--mp-primary);
    border-radius: 6px;
    color: #9a6700;
}

.mp-pdf-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 2px solid var(--mp-primary);
}

.mp-pdf-foot-text { font-size: 12px; font-weight: 800; color: #444; flex: 1 1 auto; }
.mp-pdf-foot-logos { display: flex; align-items: center; gap: 14px; }
.mp-pdf-foot-logos img { height: 38px; width: auto; }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
    .mp-event-head { padding-right: 40px; }
    .mp-toggle-label { display: none; }
    .mp-event-sub { padding: 10px 8px 12px; }
    .mp-record { font-size: 11.5px; padding: 5px 9px; gap: 7px; }
    table.mp-summary-table tbody td,
    table.mp-summary-table thead th { padding: 7px 6px; font-size: 12.5px; }
    table.mp-summary-table td.mp-c-pl { width: 48px; }
    a.mp-ath-item { flex-wrap: wrap; font-size: 12.5px; }
    .mp-ath-event { flex-basis: 100%; }
}

/* ---------- print ---------- */
@media print {
    .mp-athletes, .mp-toggle-label { display: none !important; }
    .mp-event-sub { background: #fff; }
}

/* ============================================================
   v1.7  --  team points standings (separate from medals)
   ============================================================ */
.mp-standings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 12px;
}

.mp-standings-tabs[hidden] { display: none !important; }

.mp-stab {
    background: #f1f5f9;
    border: 1px solid var(--mp-border);
    color: #334155;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.mp-stab:hover { border-color: rgba(249, 158, 31, .5); color: #111; }

.mp-stab.is-active {
    background: linear-gradient(135deg, var(--mp-secondary) 0%, var(--mp-secondary-2) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

table.mp-points-table td.mp-col-pts {
    font-weight: 700;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
}

table.mp-points-table td.mp-pts-men { color: #0b5cab; }
table.mp-points-table td.mp-pts-women { color: #a4145f; }

table.mp-points-table th:nth-child(3),
table.mp-points-table th:nth-child(4),
table.mp-points-table th:nth-child(5) { text-align: center; }

table.mp-points-table td.mp-col-total {
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    font-size: 15px;
}

table.mp-points-table td.mp-col-events,
table.mp-points-table th:last-child {
    color: var(--mp-muted);
    font-weight: 700;
    font-size: 12.5px;
    width: 72px;
}

.mp-d-pts {
    flex: 0 0 auto;
    min-width: 56px;
    font-weight: 800;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    color: #8a5a00;
}

@media (max-width: 768px) {
    .mp-standings-tabs { padding: 0 12px 10px; }
    .mp-stab { padding: 7px 12px; font-size: 12px; }
    table.mp-points-table td.mp-col-events,
    table.mp-points-table th:last-child { display: none; }
}

/* ============================================================
   v1.8  --  athlete / team profiles + placeholder cleanup
   ============================================================ */

/* ---------- clickable names ---------- */
button.mp-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px dashed rgba(0, 0, 0, .28);
    transition: color .15s, border-color .15s;
}

button.mp-link:hover {
    color: var(--mp-teal-3, #006b92);
    border-bottom-color: var(--mp-primary, #F99E1F);
}

table.mp-medals-table button.mp-link { font-weight: 800; }

.mp-detail-list li {
    align-items: baseline;
    flex-wrap: wrap;
}

a.mp-d-event {
    color: #6b5a2e;
    font-size: 12.5px;
}

a.mp-d-event:hover { color: #111; }

/* ---------- modal ---------- */
.mp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 20, .72);
    z-index: 10040;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mp-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 940px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    overflow: hidden;
    animation: mp-pop .16s ease-out;
}

@keyframes mp-pop {
    from { transform: translateY(10px); opacity: .6; }
    to   { transform: none; opacity: 1; }
}

.mp-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #101820 0%, #182738 55%, #1f3248 100%);
    color: #fff;
}

.mp-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.mp-modal-title img.team-flag {
    height: 22px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.mp-modal-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.mp-modal-team {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    opacity: .85;
}

.mp-modal-team img.team-flag { height: 13px; width: auto; }

.mp-modal-kind {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(249, 158, 31, .22);
    color: var(--mp-primary, #F99E1F);
    border: 1px solid rgba(249, 158, 31, .4);
}

.mp-modal-close {
    margin-left: auto;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.mp-modal-close:hover { background: var(--mp-primary, #F99E1F); color: #111; }

.mp-modal-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.mp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 74px;
    padding: 7px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.mp-stat-v { font-size: 17px; font-weight: 800; color: #111; line-height: 1.1; }
.mp-stat-l {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #6b7280;
    margin-top: 2px;
}

.mp-stat-pts .mp-stat-v { color: #8a5a00; }
.mp-stat-g { background: linear-gradient(135deg, #fff6d9, #ffeeb0); border-color: #f3d98a; }
.mp-stat-s { background: linear-gradient(135deg, #f6f8fa, #e6eaf0); border-color: #d3d9e0; }
.mp-stat-b { background: linear-gradient(135deg, #fdeee1, #f6dcc4); border-color: #e8c39b; }

.mp-modal-body {
    padding: 4px 14px 16px;
    max-height: 62vh;
    overflow-y: auto;
}

.mp-modal-status {
    padding: 28px 16px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    font-size: 14px;
}

table.mp-profile-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 0;
    background: #fff;
}

table.mp-profile-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--mp-primary, #F99E1F), #ffbe45);
    color: #111;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 9px 10px;
    text-align: left;
    white-space: nowrap;
}

table.mp-profile-table tbody td {
    padding: 8px 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 13.5px;
    color: #111;
}

table.mp-profile-table tbody tr:nth-of-type(odd) > td { background: #f8fafc; }

table.mp-profile-table td.mp-p-athlete { font-weight: 700; white-space: nowrap; }
table.mp-profile-table td.mp-p-event a { font-weight: 700; }
table.mp-profile-table td.mp-p-round { color: #6b7280; font-size: 12.5px; white-space: nowrap; }
table.mp-profile-table td.mp-p-pl { font-weight: 800; white-space: nowrap; width: 62px; }
table.mp-profile-table td.mp-p-mark {
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    font-weight: 800;
    white-space: nowrap;
}
table.mp-profile-table td.mp-p-pts { color: #8a5a00; font-weight: 800; width: 52px; }

table.mp-profile-table tr.mp-podium-1 > td { background: rgba(255, 215, 94, .22) !important; }
table.mp-profile-table tr.mp-podium-2 > td { background: rgba(203, 213, 225, .28) !important; }
table.mp-profile-table tr.mp-podium-3 > td { background: rgba(205, 127, 50, .16) !important; }

button.mp-ath-item {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 768px) {
    .mp-modal-backdrop { padding: 16px 8px; }
    .mp-modal-body { max-height: 70vh; padding: 4px 8px 12px; }
    .mp-modal-stats { padding: 10px 12px; }
    .mp-stat { min-width: 62px; padding: 6px 9px; }
    table.mp-profile-table tbody td,
    table.mp-profile-table thead th { padding: 7px 6px; font-size: 12.5px; }
    table.mp-profile-table td.mp-p-round { display: none; }
    table.mp-profile-table th.mp-p-round { display: none; }
}

@media print {
    .mp-modal-backdrop { display: none !important; }
}

/* ============================================================
   v1.9  --  Summary page, Medal page, td.team gap fix
   ============================================================ */

/* ---------- the gap under the flag -------------------------
   style.css sets ".team { display:flex }", which pulls the cell
   out of the table layout: when a row is two lines tall (field
   events print the wind under every attempt) the flex box keeps
   its own height and the rest of the row shows as an empty strip
   under the flag. Put the cell back into the table layout.       */
td.team,
td.ath-team,
.table-scroll td.team,
.table-scroll td.ath-team {
    display: table-cell !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

td.team img.team-flag,
td.ath-team img.team-flag {
    display: inline-block;
    vertical-align: middle;
}

td.team .team-code,
td.ath-team .team-code {
    display: inline;
    vertical-align: middle;
}

/* ---------- summary table: MeetPro's own look, all bold ---------- */
table.mp-summary-table th,
table.mp-summary-table td,
table.mp-summary-table td a,
table.mp-summary-table button.mp-link {
    font-weight: 800 !important;
}

table.mp-summary-table tr.mp-podium-1 > td { background: rgba(255, 215, 94, .22) !important; }
table.mp-summary-table tr.mp-podium-2 > td { background: rgba(203, 213, 225, .30) !important; }
table.mp-summary-table tr.mp-podium-3 > td { background: rgba(205, 127, 50, .16) !important; }

table.mp-summary-table td.place { white-space: nowrap; }
.mp-pl-medal { margin-right: 4px; }

/* ---------- page views ---------- */
.mp-view { display: none; }

body[data-mp-view="summary"] .mp-view-summary,
body[data-mp-view="medals"] .mp-view-medals { display: block; }

body[data-mp-view="summary"] .mp-home-only,
body[data-mp-view="medals"] .mp-home-only { display: none !important; }

.nav a.mp-nav-active,
nav a.mp-nav-active {
    background: linear-gradient(135deg, var(--primary, #F99E1F), #ffbe45) !important;
    color: #111 !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(249, 158, 31, .28) !important;
}

/* ---------- summary page ---------- */
.mp-summary-page {
    background: var(--card, #fff);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    margin: 0 0 28px;
    overflow: hidden;
    position: relative;
    --mp-primary: var(--primary, #F99E1F);
    --mp-secondary: var(--secondary, #101820);
    --mp-secondary-2: var(--secondary-2, #182738);
    --mp-teal-1: #00a9ac;
    --mp-teal-2: #0081a3;
    --mp-teal-3: #006b92;
    --mp-beige: #fff8e7;
    --mp-beige-line: #fde68a;
    --mp-beige-text: #9a6700;
    --mp-card: var(--card, #ffffff);
    --mp-border: var(--border, #e5e7eb);
    --mp-muted: var(--muted, #6b7280);
}

.mp-summary-page::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(135deg, var(--mp-teal-1) 0%, var(--mp-teal-2) 50%, var(--mp-teal-3) 100%);
}

.mp-summary-page .mp-medals-title::before {
    background: linear-gradient(135deg, #7ee0e2, var(--mp-teal-2));
    box-shadow: 0 0 0 3px rgba(0, 169, 172, .2);
}

.mp-sum-toolbar {
    margin: 0 14px 14px;
    border-radius: 12px;
}

.mp-sum-toolbar::before { display: none; }

.mp-summary-body { padding: 0 14px 16px; }

.mp-sum-event {
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    margin: 0 0 14px;
    overflow: hidden;
    background: #fff;
}

.mp-sum-event[hidden] { display: none !important; }

.mp-sum-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: linear-gradient(135deg, var(--mp-teal-1) 0%, var(--mp-teal-2) 55%, var(--mp-teal-3) 100%);
    color: #fff;
}

.mp-sum-head .mp-ev-num {
    background: rgba(0, 0, 0, .28);
    color: #fff;
}

.mp-sum-head .mp-ev-name {
    color: #fff;
    font-size: 16px;
    flex: 1 1 200px;
}

.mp-sum-head .mp-badge-gender { background: rgba(0, 0, 0, .3); }
.mp-sum-head .mp-badge-type { background: rgba(255, 255, 255, .9); color: var(--mp-teal-3); border-color: transparent; }
.mp-sum-head .mp-badge-div { background: var(--mp-beige); color: var(--mp-beige-text); border-color: transparent; }

a.mp-sum-link {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
}

a.mp-sum-link:hover { background: var(--mp-primary); color: #111; text-decoration: none; }

.mp-sum-event table.mp-summary-table { margin-bottom: 0; }
.mp-sum-event tr[hidden] { display: none !important; }

@media (max-width: 768px) {
    .mp-sum-toolbar { margin: 0 8px 12px; }
    .mp-summary-body { padding: 0 8px 12px; }
    .mp-sum-head { padding: 9px 10px; gap: 7px; }
    .mp-sum-head .mp-ev-name { font-size: 14.5px; flex-basis: 100%; }
    a.mp-sum-link { font-size: 11.5px; }
}

/* ============================================================
   v2.1  --  compact filter chips on phones
   The chips used to run wider than the screen and spill into
   three ragged rows; keep them small enough to read at a glance.
   ============================================================ */
@media (max-width: 700px) {
    .mp-toolbar {
        padding: 10px 10px 11px;
        border-radius: 12px;
    }

    .mp-toolbar-row { gap: 7px; }
    .mp-toolbar-row + .mp-toolbar-row { margin-top: 8px; }

    .mp-chips { gap: 5px; }

    .mp-chip {
        padding: 5px 10px;
        font-size: 11.5px;
        letter-spacing: 0;
        line-height: 1.25;
    }

    .mp-chip-sep { height: 18px; margin: 0 2px; }

    .mp-tool {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .mp-search input {
        font-size: 14px;
        padding: 9px 34px 9px 34px;
    }

    .mp-search-icon { left: 11px; width: 13px; height: 13px; }

    .mp-count {
        font-size: 11.5px;
        padding: 5px 10px;
    }
}

@media (max-width: 400px) {
    .mp-chip { padding: 5px 8px; font-size: 11px; }
    .mp-chips { gap: 4px; }
}

/* ============================================================
   v2.2  --  narrow tables fit the phone instead of scrolling
   ------------------------------------------------------------
   style.css v1.4 forces "white-space: nowrap" on every cell inside
   .table-scroll below 992px so that the wide field-series tables
   scroll sideways. That is right for a results table with six
   ATTEMPTS columns, but it also pushed the timetable and the
   summary tables off the screen. Those two have few columns, so
   let them wrap and fit instead.
   ============================================================ */
@media (max-width: 992px) {
    .table-scroll > table.mp-schedule,
    .table-scroll > table.mp-summary-table,
    table.mp-schedule,
    table.mp-summary-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    .table-scroll > table.mp-schedule > thead > tr > th,
    .table-scroll > table.mp-schedule > tbody > tr > td,
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td,
    .table-scroll > table.mp-summary-table > thead > tr > th,
    .table-scroll > table.mp-summary-table > tbody > tr > td,
    table.mp-summary-table > thead > tr > th,
    table.mp-summary-table > tbody > tr > td {
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
        font-size: 11.5px !important;
        padding: 7px 5px !important;
        line-height: 1.3;
    }

    /* keep the numbers and the team code on one line */
    table.mp-schedule td.time,
    table.mp-schedule td.round,
    table.mp-summary-table td.place,
    table.mp-summary-table td.mark,
    table.mp-summary-table td.points,
    table.mp-summary-table th.place,
    table.mp-summary-table th.mark,
    table.mp-summary-table th.points {
        white-space: nowrap !important;
    }

    table.mp-summary-table td.team { white-space: nowrap !important; }

    table.mp-summary-table td.team img.team-flag {
        height: 15px;
        width: 22px;
        margin-right: 4px;
    }
}

@media (max-width: 430px) {
    .table-scroll > table.mp-schedule > thead > tr > th,
    .table-scroll > table.mp-schedule > tbody > tr > td,
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td {
        font-size: 10.5px !important;
        padding: 6px 4px !important;
    }
}

/* ============================================================
   v2.3  --  ONE table look for every table
   ------------------------------------------------------------
   The Summary tables read better than MeetPro's own, so the same
   type, size, weight and flag treatment is now applied to the
   results tables and the timetable as well. Proportions follow
   the UAEGRANDPRIX2024 site: 14px text, 5-8px padding, headers
   that wrap at spaces (never inside a word) and thin grey rules.
   ============================================================ */
table.results-table,
table.mp-schedule,
table.mp-summary-table,
table.mp-medals-table,
table.mp-profile-table {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    border-collapse: collapse;
}

/* --- body cells --- */
table.results-table > thead > tr > th,
table.results-table > tbody > tr > td,
table.mp-schedule > thead > tr > th,
table.mp-schedule > tbody > tr > td,
table.mp-summary-table > thead > tr > th,
table.mp-summary-table > tbody > tr > td {
    font-size: 14px;
    line-height: 1.45;
    padding: 7px 9px;
    vertical-align: middle;
    /* wrap between words only - never split a word like "STAT US" */
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
}

table.results-table > tbody > tr > td,
table.mp-schedule > tbody > tr > td,
table.mp-summary-table > tbody > tr > td {
    font-weight: 800;
    color: #111;
    border-top: 1px solid #e5e7eb !important;
}

/* --- headers: keep the orange bar, drop the squeeze --- */
table.results-table > thead > tr > th,
table.mp-schedule > thead > tr > th,
table.mp-summary-table > thead > tr > th {
    font-weight: 800;
    letter-spacing: .2px;
    text-align: left;
    border: none;
}

table.results-table > thead > tr > th.place,
table.results-table > thead > tr > th.hplace,
table.mp-summary-table > thead > tr > th.place,
table.results-table > thead > tr > th.points,
table.mp-summary-table > thead > tr > th.points { text-align: center; }

table.results-table > thead > tr > th.mark,
table.results-table > thead > tr > th.time,
table.mp-summary-table > thead > tr > th.mark { text-align: right; }

table.results-table > tbody > tr > td.mark,
table.results-table > tbody > tr > td.time,
table.mp-summary-table > tbody > tr > td.mark {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.results-table > tbody > tr > td.place,
table.results-table > tbody > tr > td.hplace,
table.results-table > tbody > tr > td.points,
table.mp-summary-table > tbody > tr > td.place,
table.mp-summary-table > tbody > tr > td.points {
    text-align: center;
    white-space: nowrap;
}

/* the attempts sub-table stays a notch lighter so the row can breathe */
table.horizontal-table td,
table.vertical-table td,
table.splits-table td {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    white-space: nowrap;
}

/* --- team + flag: the Summary treatment, everywhere --- */
td.team,
td.ath-team {
    white-space: nowrap !important;
}

td.team img.team-flag,
td.ath-team img.team-flag {
    height: 22px;
    width: 33px;
    object-fit: cover;
    margin: 0 8px 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    vertical-align: middle;
    display: inline-block;
}

td.team .team-code,
td.ath-team .team-code,
td.team button.mp-link,
td.ath-team button.mp-link {
    font-weight: 800;
    vertical-align: middle;
    letter-spacing: .3px;
}

/* ---------- phones ---------- */
@media (max-width: 992px) {
    .table-scroll > table.results-table > thead > tr > th,
    .table-scroll > table.results-table > tbody > tr > td,
    table.results-table > thead > tr > th,
    table.results-table > tbody > tr > td,
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td,
    table.mp-summary-table > thead > tr > th,
    table.mp-summary-table > tbody > tr > td {
        font-size: 13px !important;
        padding: 6px 7px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    td.team img.team-flag,
    td.ath-team img.team-flag,
    .table-scroll .team-flag {
        height: 18px !important;
        width: 27px !important;
        margin-right: 6px !important;
    }
}

@media (max-width: 430px) {
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td {
        font-size: 12px !important;
        padding: 6px 5px !important;
    }

    table.results-table > thead > tr > th,
    table.results-table > tbody > tr > td,
    table.mp-summary-table > thead > tr > th,
    table.mp-summary-table > tbody > tr > td {
        font-size: 12.5px !important;
        padding: 6px 6px !important;
    }

    td.team img.team-flag,
    td.ath-team img.team-flag,
    .table-scroll .team-flag {
        height: 16px !important;
        width: 24px !important;
        margin-right: 5px !important;
    }
}

/* ---------- timetable column proportions ----------
   short columns shrink to their content, the event name gets the rest  */
table.mp-schedule { table-layout: auto; }

table.mp-schedule .mp-c-status,
table.mp-schedule .mp-c-time,
table.mp-schedule .mp-c-round,
table.mp-schedule .mp-c-slist,
table.mp-schedule .mp-c-res {
    width: 1%;
    white-space: nowrap;
}

table.mp-schedule .mp-c-event {
    width: auto;
    white-space: normal;
}

@media (max-width: 700px) {
    table.mp-schedule .mp-c-slist,
    table.mp-schedule .mp-c-res { white-space: normal; }

    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td { padding: 6px 5px !important; }
}

@media (max-width: 430px) {
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

@media (max-width: 400px) {
    table.mp-schedule > thead > tr > th,
    table.mp-schedule > tbody > tr > td {
        font-size: 10.5px !important;
        padding: 5px 3px !important;
    }

    table.mp-schedule .mp-c-status { font-size: 10px !important; }
}

/* the outer 1px border of .table-bordered must not push the table
   past its scroll box on the narrowest phones */
table.mp-schedule,
table.mp-summary-table {
    max-width: 100% !important;
    box-sizing: border-box;
}

table.mp-schedule { border-left: 0 !important; border-right: 0 !important; }

/* the reference site uses Title Case headers - easier to read and
   noticeably narrower than the uppercase + letter-spaced version */
table.mp-schedule > thead > tr > th {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   v2.4  --  the shared look covers EVERY MeetPro report
   (start lists, entries, heat sheets, performance lists,
    rosters, team scores - not only the results tables)
   ============================================================ */
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    padding: 7px 9px;
    vertical-align: middle;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,

.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
    font-weight: 800;
    color: #111;
    border-top: 1px solid #e5e7eb !important;
}

.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th ,

.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th {
    font-weight: 800;
    letter-spacing: .2px;
    text-align: left;
    border: none;
}

/* lane / bib / place style columns read better centred */
.container table.table > tbody > tr > td.lane,
.container table.table > tbody > tr > td.comp,
.container-fluid table.table > tbody > tr > td.comp,
.container table.table > tbody > tr > td.place,
.container-fluid table.table > tbody > tr > td.place,
.container table.table > tbody > tr > td.hplace,
.container-fluid table.table > tbody > tr > td.hplace,
.container table.table > tbody > tr > td.points,
.container-fluid table.table > tbody > tr > td.points,
.container table.table > thead > tr > th.lane,
.container-fluid table.table > thead > tr > th.lane,
.container table.table > thead > tr > th.comp,
.container-fluid table.table > thead > tr > th.comp,
.container table.table > thead > tr > th.place,
.container-fluid table.table > thead > tr > th.place,
.container table.table > thead > tr > th.hplace,
.container-fluid table.table > thead > tr > th.hplace,
.container table.table > thead > tr > th.points ,
.container-fluid table.table > thead > tr > th.points {
    text-align: center;
    white-space: nowrap;
}

/* every heading inside a card gets the same beige bar */
.mp-event-body h4.start-time-hdr,
.mp-event-body h4.round-start-list-hdr,
.mp-event-body h4.heat-start-list-hdr,
.mp-event-body h4:not(.round-results-hdr):not(.heat-results-hdr):not(.heat-wind-hdr) {
    color: #9a6700;
    font-size: 14px;
    font-weight: 800;
    margin: 14px 0 8px;
    padding: 8px 12px;
    background: #fff8e7;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--primary, #F99E1F);
    border-radius: 8px;
}

@media (max-width: 992px) {
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
    .container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
        font-size: 13px !important;
        padding: 6px 7px !important;
    }
}

@media (max-width: 430px) {
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
    .container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
        font-size: 12.5px !important;
        padding: 6px 6px !important;
    }
}

/* the exported PDF follows the same column alignment as the page */
.mp-pdf-doc td.lane,
.mp-pdf-doc td.comp,
.mp-pdf-doc td.place,
.mp-pdf-doc td.hplace,
.mp-pdf-doc td.points,
.mp-pdf-doc th.lane,
.mp-pdf-doc th.comp,
.mp-pdf-doc th.place,
.mp-pdf-doc th.hplace,
.mp-pdf-doc th.points { text-align: center; }

.mp-pdf-doc td.mark,
.mp-pdf-doc td.time,
.mp-pdf-doc th.mark,
.mp-pdf-doc th.time { text-align: right; }

.mp-pdf-doc td.team { white-space: nowrap; }

/* ============================================================
   v2.6  --  overall polish
   header - footer - podium - status pills - live panel - nav
   ============================================================ */

/* ---- header: logo, meet name, town and date read as one block ---- */
@media (min-width: 768px) {
    .header {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        grid-template-rows: auto auto auto;
        column-gap: 24px;
        row-gap: 2px;
        align-items: center;
        padding: 26px 32px;
    }
    .header .col-md-4 {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: auto;
        padding: 0;
        margin: 0;
        float: none;
    }
    .header h3 { grid-column: 2; grid-row: 1; text-align: left; margin: 0; }
    .header h4 { grid-column: 2; grid-row: 2; text-align: left; margin: 4px 0 0; }
    .header h5 { grid-column: 2; grid-row: 3; text-align: left; margin: 2px 0 0; }
    .header h3 { font-size: 2rem; }
}

/* the meet logo usually has a white background of its own - frame it so it
   reads as a deliberate badge instead of a pasted rectangle */
.header img.logo {
    background: #fff;
    padding: 9px 11px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
    margin-right: 0;
    height: 132px;
    max-height: 150px;
}
@media (max-width: 700px) {
    .header img.logo { height: 92px; padding: 8px 10px; border-radius: 14px; }
}

/* the name is a link home, but it should look like the title, not a link */
.header h3 a,
.header h3 a.home-link-hdr {
    color: #fff !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
.header h3 a:hover,
.header h3 a.home-link-hdr:hover { color: var(--primary) !important; }

/* ---- footer ---- */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: left !important;
}
.footer .footer-main { text-align: left; }
.footer .footer-main p { margin: 0 0 2px; font-weight: 700; }
.footer .footer-logos {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 !important;
}
/* The footer marks are framed like the meet logo AND cut to identical tiles.
   Left to themselves the two images are different shapes, so the cards came
   out different widths and looked untidy next to each other. Every mark now
   sits in the same square, scaled to fit inside it, whatever its shape. */
.footer .footer-logos a,
.footer .footer-logos img {
    display: inline-block;
    vertical-align: middle;
}
.footer .footer-logos img {
    width: 84px !important;
    height: 84px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    opacity: 1;
    transition: box-shadow .15s ease, transform .15s ease;
}
.footer .footer-logos img:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    transform: translateY(-1px);
}
@media (max-width: 700px) {
    .footer .footer-logos img {
        width: 66px !important;
        height: 66px !important;
        padding: 8px;
        border-radius: 14px;
    }
}

@media (max-width: 700px) {
    .footer { justify-content: center; text-align: center !important; }
    .footer .footer-main { text-align: center; width: 100%; }
    .footer .footer-logos { justify-content: center; width: 100%; }
}

/* ---- podium: the first three finishers carry their medal colour ---- */
.container table.table > tbody > tr.mp-podium > td { position: relative; }
.container table.table > tbody > tr.mp-podium-1 > td ,
.container-fluid table.table > tbody > tr.mp-podium-1 > td { background: rgba(224, 168, 0, .15) !important; }
.container table.table > tbody > tr.mp-podium-2 > td ,
.container-fluid table.table > tbody > tr.mp-podium-2 > td { background: rgba(148, 163, 184, .17) !important; }
.container table.table > tbody > tr.mp-podium-3 > td ,
.container-fluid table.table > tbody > tr.mp-podium-3 > td { background: rgba(205, 127, 50, .14) !important; }
.container table.table > tbody > tr.mp-podium-1 > td:first-child ,
.container-fluid table.table > tbody > tr.mp-podium-1 > td:first-child { box-shadow: inset 4px 0 0 #e0a800; }
.container table.table > tbody > tr.mp-podium-2 > td:first-child ,
.container-fluid table.table > tbody > tr.mp-podium-2 > td:first-child { box-shadow: inset 4px 0 0 #94a3b8; }
.container table.table > tbody > tr.mp-podium-3 > td:first-child ,
.container-fluid table.table > tbody > tr.mp-podium-3 > td:first-child { box-shadow: inset 4px 0 0 #cd7f32; }

/* ---- athletes who did not finish are present but quiet ---- */
.container table.table > tbody > tr.mp-nofinish > td {
    color: #6b7280 !important;
    font-weight: 700 !important;
}
.mp-status-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: #eef1f5;
    border: 1px solid #dbe1ea;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
}

/* ---- a record beaten at this meet ---- */
.mp-rec-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--primary);
    color: #101820;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .5px;
    vertical-align: middle;
}

/* ---- timetable: status reads at a glance ---- */
td.mp-c-status .mp-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.mp-pill-done { background: #e7f6ec; color: #166534; border: 1px solid #bbe5c8; }
.mp-pill-live { background: #fff1e0; color: #9a4b00; border: 1px solid #ffd7a8; }
.mp-pill-todo { background: #eef1f5; color: #475569; border: 1px solid #dbe1ea; }

.mp-pill-live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #e2680a;
    vertical-align: middle;
    animation: mp-live-pulse 1.4s ease-in-out infinite;
}
@keyframes mp-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    .mp-pill-live::before { animation: none; }
}

.container table.table > tbody > tr.mp-row-live > td ,

.container-fluid table.table > tbody > tr.mp-row-live > td {
    background: rgba(249, 158, 31, .16) !important;
}

/* the pill must never be the reason the timetable stops fitting a phone */
@media (max-width: 700px) {
    td.mp-c-status .mp-pill { padding: 2px 7px; font-size: 10.5px; }
}
@media (max-width: 470px) {
    td.mp-c-status .mp-pill {
        padding: 1px 3px;
        font-size: 8px;
        letter-spacing: 0;
        white-space: normal;
        line-height: 1.2;
    }
    .mp-pill-live::before { width: 4px; height: 4px; margin-right: 2px; }
    /* the status column was the widest thing on the row - it does not need
       to be, the colour carries most of the meaning */
    .container table.table.mp-schedule > thead > tr > th.mp-c-status,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-status ,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-status {
        font-size: 9px !important;
        padding: 5px 3px !important;
    }
}




/* the report links become small buttons on anything wider than a phone -
   below that they stay plain text so the table still fits the screen */
@media (min-width: 701px) {
    table.mp-schedule td.mp-c-slist a,
    table.mp-schedule td.mp-c-res a,
    table.mp-schedule td.mp-c-entries a,
    table.mp-schedule td.mp-c-plist a {
        display: inline-block;
        padding: 3px 11px;
        border-radius: 8px;
        background: #f1f5f9;
        border: 1px solid #dbe3ec;
        color: #12283d !important;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none !important;
        transition: background .15s ease, border-color .15s ease;
    }
    table.mp-schedule td.mp-c-slist a:hover,
    table.mp-schedule td.mp-c-res a:hover,
    table.mp-schedule td.mp-c-entries a:hover,
    table.mp-schedule td.mp-c-plist a:hover {
        background: var(--primary);
        border-color: var(--primary);
        color: #101820 !important;
    }
}

/* ---- the live feed folds away while nothing is running ---- */
.live-scoreboard-box.mp-live-idle .live-details-bar,
.live-scoreboard-box.mp-live-idle #live-results-target,
.live-scoreboard-box.mp-live-idle .live-time { display: none !important; }

.live-scoreboard-box.mp-live-idle {
    padding: 10px 16px !important;
    cursor: pointer;
}
.live-scoreboard-box.mp-live-idle .live-scoreboard-header { margin: 0 !important; }
.live-scoreboard-box.mp-live-idle .live-title {
    font-size: 13px !important;
    font-weight: 700;
    opacity: .72;
    margin: 2px 0 0 !important;
}

/* headings that sit on the page backdrop rather than inside a white card */
.container > h1, .container > h2, .container-fluid > h2, .container > h3, .container-fluid > h3,
.container > h4,
.container-fluid > h4, .container > h5, .container-fluid > h5,
.container > .row > h1,
.container-fluid > .row > h1, .container > .row > h2, .container-fluid > .row > h2, .container > .row > h3, .container-fluid > .row > h3,
.container > .row > [class^="col-"] > h3:first-child ,
.container-fluid > .row > [class^="col-"] > h3:first-child {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.container > .pageDateStamp ,
.container-fluid > .pageDateStamp { color: rgba(255, 255, 255, .75); }

/* ---- previous / next event ---- */
.mp-eventnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 4px;
    flex-wrap: wrap;
}
.mp-eventnav a {
    display: inline-block;
    max-width: 46%;
    padding: 7px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbe3ec;
    color: #12283d !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.mp-eventnav a:hover { background: var(--primary); border-color: var(--primary); }
.mp-eventnav .mp-eventnav-next { margin-left: auto; }

/* ---- one flag everywhere: the medal table and the standings wear the
        same flag as the result tables ---- */
table.mp-medals-table td.mp-col-team img.team-flag,
table.mp-points-table td.mp-col-team img.team-flag {
    height: 22px !important;
    width: 33px !important;
    object-fit: cover;
    margin: 0 8px 0 0 !important;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    vertical-align: middle !important;
    display: inline-block;
}
table.mp-medals-table td.mp-col-team,
table.mp-points-table td.mp-col-team { white-space: nowrap; }

@media (max-width: 700px) {
    table.mp-medals-table td.mp-col-team img.team-flag,
    table.mp-points-table td.mp-col-team img.team-flag {
        height: 17px !important;
        width: 25px !important;
        margin-right: 6px !important;
    }
}

/* ---- athlete and team names are clickable everywhere ---- */
.container table.table td.athlete button.mp-link,
.container table.table td.team button.mp-link,
.container-fluid table.table td.team button.mp-link,
.container table.table td.ath-team button.mp-link,
.container-fluid table.table td.ath-team button.mp-link,
.container table.table td.comp button.mp-link ,
.container-fluid table.table td.comp button.mp-link {
    border-bottom: 1px dotted rgba(15, 34, 51, .35);
    cursor: pointer;
}
.container table.table td.athlete button.mp-link:hover,
.container-fluid table.table td.athlete button.mp-link:hover,
.container table.table td.team button.mp-link:hover,
.container-fluid table.table td.team button.mp-link:hover,
.container table.table td.ath-team button.mp-link:hover,
.container-fluid table.table td.ath-team button.mp-link:hover,
.container table.table td.comp button.mp-link:hover ,
.container-fluid table.table td.comp button.mp-link:hover {
    color: #0b5cab !important;
    border-bottom-color: #0b5cab;
}

/* ============================================================
   v2.8  --  live panel with tabs (track + the field boards)
   ============================================================ */
.live-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

/* the live box is a white card, so the tabs are light pills with dark text */
.live-tab {
    appearance: none;
    border: 1px solid #dbe3ec;
    background: #f1f5f9;
    color: #33475b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.live-tab:hover { background: #e2e8f0; color: #12283d; }
.live-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #101820;
}

.live-panel[hidden] { display: none !important; }

/* ---- a field board ---- */
.live-field-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
/* badge over the event name, the same stack the track panel uses */
.live-field-ident { flex: 1 1 220px; min-width: 0; }
.live-field-head .live-field-title { margin: 6px 0 0; }
.live-badge-field { flex: 0 0 auto; }
.live-field-time { margin-left: auto; }

/* the field clock reads like the track clock, so a viewer switching tabs
   is not looking at two different-looking timers */
.live-field-clock {
    background: rgba(0, 0, 0, .35);
    font-size: 2rem;
    font-weight: 800;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    text-align: center;
    color: var(--primary);
    letter-spacing: .08em;
    padding: 12px 10px;
    border-radius: 10px;
    border: 2px solid rgba(249, 158, 31, .45);
}
@media (max-width: 700px) {
    .live-field-clock { width: 100%; font-size: 1.65rem; }
}

.live-field-meta { margin-top: 12px; }

.live-field-current {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(249, 158, 31, .12);
    border: 1px solid rgba(249, 158, 31, .35);
}
.live-field-current[hidden] { display: none; }
.live-now-label {
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #b06b12;
}
.live-now-name { font-size: 15px; font-weight: 900; color: #101820; }
.live-now-team { font-weight: 800; color: #33475b; }
.live-now-attempt {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    color: #6b7280;
}

.live-field-grid { margin-top: 14px; }

/* a full attempt grid will not fit a phone - let it scroll sideways inside
   its own box rather than pushing the page wide */
.live-field-grid .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.live-field-table { margin: 0; width: 100%; }
table.live-field-table > thead > tr > th {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 8px;
    white-space: nowrap;
}
/* style.css centres nothing by default and bootstrap left-aligns th, so the
   attempt/height headings need saying explicitly to sit over their column */
.container table.table.live-field-table > thead > tr > th.live-fc-att,
.container table.table.live-field-table > thead > tr > th.live-fc-best,
.container-fluid table.table.live-field-table > thead > tr > th.live-fc-best,
.container table.table.live-field-table > thead > tr > th.live-fc-place ,
.container-fluid table.table.live-field-table > thead > tr > th.live-fc-place {
    text-align: center !important;
}
table.live-field-table > tbody > tr > td {
    font-size: 13.5px;
    font-weight: 800;
    padding: 7px 8px;
    text-align: center;
    vertical-align: middle;
}
table.live-field-table th.live-fc-name,
table.live-field-table td.live-fc-name { text-align: left; white-space: nowrap; }
table.live-field-table th.live-fc-team,
table.live-field-table td.live-fc-team { text-align: left; white-space: nowrap; }
table.live-field-table td.live-fc-best { font-variant-numeric: tabular-nums; }
table.live-field-table td.live-fc-place { width: 40px; }

/* one attempt cell */
table.live-field-table td.live-fc-att {
    min-width: 68px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
/* NOTE the `span.` and the `-s-` in the state classes below.
   The cell used to be given `live-att-<state>`, and one of the states is
   "mark" - so an attempt cell landed on `.live-att-mark { display: block }`,
   which was meant for the span inside it. Those cells stopped being table
   cells and wrapped onto their own line, which is what made the grid fall
   apart from the third attempt on. Cell states are `live-att-s-<state>` now
   and can never collide with the spans. */
span.live-att-mark { display: block; }
span.live-att-imp,
span.live-att-wind {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
}

/* the attempt states the bridge sends */
td.live-att-s-best    { background: rgba(22, 163, 74, .16) !important; }
td.live-att-s-best span.live-att-mark { color: #14632f; }
td.live-att-s-foul    { background: rgba(224, 49, 49, .10) !important; }
td.live-att-s-foul span.live-att-mark { color: #b02020; }
td.live-att-s-passed span.live-att-mark { color: #6b7280; }
td.live-att-s-current { background: rgba(135, 206, 250, .22) !important; }
td.live-att-s-cleared { background: rgba(22, 163, 74, .08) !important; }

/* and make sure nothing can take an attempt cell out of the table again */
.container table.table.live-field-table > tbody > tr > td,
.container table.table.live-field-table > thead > tr > th ,
.container-fluid table.table.live-field-table > thead > tr > th {
    display: table-cell !important;
}

/* whoever is throwing right now */
table.live-field-table > tbody > tr.live-row-now > td {
    background: rgba(249, 158, 31, .14);
}
table.live-field-table > tbody > tr.live-row-now > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

@media (max-width: 700px) {
    .live-tab { font-size: 12px; padding: 6px 11px; }
    .live-field-time { margin-left: 0; }
    table.live-field-table > thead > tr > th,
    table.live-field-table > tbody > tr > td { font-size: 12px; padding: 6px 5px; }
    table.live-field-table td.live-fc-att { min-width: 56px; }
    span.live-att-imp { display: none; }
}

@media (max-width: 430px) {
    table.live-field-table > thead > tr > th,
    table.live-field-table > tbody > tr > td { font-size: 11px; padding: 5px 4px; }
    table.live-field-table td.live-fc-att { min-width: 48px; }
    /* give the attempt columns the room instead of a long name */
    table.live-field-table td.live-fc-name {
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* style.css marks every .team cell display:table-cell !important, so
       hiding the column needs !important of its own */
    table.live-field-table th.live-fc-team,
    table.live-field-table td.live-fc-team { display: none !important; }
}

/* ============================================================
   v3.2  --  sortable attempts, one font on the track board,
             and the same design on a phone as on a desktop
   ============================================================ */

/* ---- an attempt heading you can click to re-rank the grid ---- */
.container table.table.live-field-table > thead > tr > th.live-fc-sortable {
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}
.container table.table.live-field-table > thead > tr > th.live-fc-sortable:hover ,
.container-fluid table.table.live-field-table > thead > tr > th.live-fc-sortable:hover {
    background: rgba(0, 0, 0, .10);
}
.container table.table.live-field-table > thead > tr > th.live-fc-sortable.is-sorted ,
.container-fluid table.table.live-field-table > thead > tr > th.live-fc-sortable.is-sorted {
    background: rgba(0, 0, 0, .14);
}
.live-sort-caret { font-weight: 900; }

/* ---- the best mark is the headline number ---- */
.container table.table.live-field-table > tbody > tr > td.live-fc-best.has-best {
    color: #14632f !important;
    font-weight: 900;
}

/* ---- track board: every column in the same typeface ----
   a team with a flag was wrapped in .team-code at weight 600 while a team
   without one stayed unwrapped at 400, and FINAL/DELTA were monospace at
   two more sizes again - four different looks in one table */
#live-results-target .live-results-table tbody td,
#live-results-target .live-col-team,
#live-results-target .live-col-team .team-code,
#live-results-target .live-col-time,
#live-results-target .live-col-time-sub {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
#live-results-target .live-col-team,
#live-results-target .live-col-team .team-code {
    font-weight: 800 !important;
    color: #12283d !important;
    font-size: 13px;
}
#live-results-target .live-col-time,
#live-results-target .live-col-time-sub {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #12283d !important;
    font-variant-numeric: tabular-nums;
}
#live-results-target .live-col-time-sub { color: #6b7280 !important; }

/* ---- the page nav and the day tabs look like the next-event button ---- */
nav.nav a,
.mp-tab {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbe3ec;
    color: #12283d !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
nav.nav a:hover,
.mp-tab:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #101820 !important;
}
nav.nav a.is-active,
nav.nav a[aria-current="page"],
.mp-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #101820 !important;
}

/* ---- phone and desktop must not look like two different sites ----
   the report links stayed plain blue text on a phone while the desktop
   showed buttons; they are buttons everywhere now, just tighter */
table.mp-schedule td.mp-c-slist a,
table.mp-schedule td.mp-c-res a,
table.mp-schedule td.mp-c-entries a,
table.mp-schedule td.mp-c-plist a {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #dbe3ec;
    color: #12283d !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
table.mp-schedule td.mp-c-slist a:hover,
table.mp-schedule td.mp-c-res a:hover,
table.mp-schedule td.mp-c-entries a:hover,
table.mp-schedule td.mp-c-plist a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #101820 !important;
}

@media (max-width: 700px) {
    table.mp-schedule td.mp-c-slist a,
    table.mp-schedule td.mp-c-res a,
    table.mp-schedule td.mp-c-entries a,
    table.mp-schedule td.mp-c-plist a {
        padding: 3px 6px;
        font-size: 10px;
        border-radius: 7px;
    }
    nav.nav a, .mp-tab { padding: 6px 11px; font-size: 12px; }
}

/* the buttons stay buttons on a phone - they just get tight enough that four
   report columns plus the status pill still fit a 360px screen */
@media (max-width: 470px) {
    table.mp-schedule td.mp-c-slist a,
    table.mp-schedule td.mp-c-res a,
    table.mp-schedule td.mp-c-entries a,
    table.mp-schedule td.mp-c-plist a {
        padding: 2px 4px;
        font-size: 8.5px;
        border-radius: 6px;
        letter-spacing: 0;
    }
    .container table.table.mp-schedule > tbody > tr > td.mp-c-slist,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-slist,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-res,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-res,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-entries,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-entries,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-plist,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-plist,
    .container table.table.mp-schedule > thead > tr > th.mp-c-slist,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-slist,
    .container table.table.mp-schedule > thead > tr > th.mp-c-res,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-res,
    .container table.table.mp-schedule > thead > tr > th.mp-c-entries,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-entries,
    .container table.table.mp-schedule > thead > tr > th.mp-c-plist ,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-plist {
        padding: 5px 2px !important;
    }
}

/* ---- the timetable columns get the space they each need ----
   "Start Time" was wrapping onto two lines while the event name column took
   all the room it wanted. The time is a fixed short string, so it is never
   allowed to wrap; the event name is the one that should give way and wrap
   instead, and it takes whatever is left over. */
/* Above a small portrait phone there is room to keep the time on one line -
   this is the case that was wrong: in landscape the event name was taking
   everything and "Start Time" was folding in half next to it.
   On a 360px portrait screen there is no such room, so there the time is
   allowed to wrap again rather than push the table off the side. */
@media (min-width: 471px) {
    .container table.table.mp-schedule > thead > tr > th.mp-c-time,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-time,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-time,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-time,
    .container table.table.mp-schedule > thead > tr > th.mp-c-round,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-round,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-round ,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-round {
        white-space: nowrap !important;
    }
}
.container table.table.mp-schedule > thead > tr > th.mp-c-time,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-time,
.container table.table.mp-schedule > tbody > tr > td.mp-c-time,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-time,
.container table.table.mp-schedule > thead > tr > th.mp-c-round,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-round,
.container table.table.mp-schedule > tbody > tr > td.mp-c-round ,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-round { width: 1%; }
.container table.table.mp-schedule > thead > tr > th.mp-c-event,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-event,
.container table.table.mp-schedule > tbody > tr > td.mp-c-event ,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-event {
    width: auto;
    white-space: normal !important;
}
.container table.table.mp-schedule > thead > tr > th.mp-c-slist,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-slist,
.container table.table.mp-schedule > thead > tr > th.mp-c-res,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-res,
.container table.table.mp-schedule > thead > tr > th.mp-c-entries,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-entries,
.container table.table.mp-schedule > thead > tr > th.mp-c-plist,
.container-fluid table.table.mp-schedule > thead > tr > th.mp-c-plist,
.container table.table.mp-schedule > tbody > tr > td.mp-c-slist,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-slist,
.container table.table.mp-schedule > tbody > tr > td.mp-c-res,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-res,
.container table.table.mp-schedule > tbody > tr > td.mp-c-entries,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-entries,
.container table.table.mp-schedule > tbody > tr > td.mp-c-plist ,
.container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-plist {
    width: 1%;
    white-space: nowrap !important;
}

/* ---- the timetable keeps its own tighter scale (must stay LAST) ----
   the :not() chain is repeated so this beats the generic table rule  */
@media (max-width: 700px) {
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
        padding: 6px 5px !important;
    }
}

@media (max-width: 430px) {
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

@media (max-width: 400px) {
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th,
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td ,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td {
        font-size: 10.5px !important;
        padding: 5px 3px !important;
    }

    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-c-status,

    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-c-status,
    .container table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-c-status ,
    .container-fluid table.table.mp-schedule:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-c-status {
        font-size: 10px !important;
    }
}

/* =================================================================
   v3.6  HEADER ASIDE
   The right half of the header banner was empty. It now carries what
   is running now, what is next, and how much of the meet is published.
   The header is already a 2-column grid from 768px up (v2.6 block
   above) - this widens it to three and drops the panel into the third,
   so the logo and the meet name keep the placement they have today.
   No !important and no table selectors here, so this block does not
   disturb the timetable ordering rules below it.
   ================================================================= */
.mp-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    position: relative;
    z-index: 2;
}
.mp-head-text > h3,
.mp-head-text > h4,
.mp-head-text > h5,
.mp-head-text > h6 { margin: 0; width: auto; max-width: 100%; }

.mp-head-aside {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    text-align: left;
    line-height: 1.3;
}
.mp-head-aside > * + * {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mp-ha-k {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .72;
}
.mp-ha-v {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-ha-when {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
}

.mp-ha-live {
    display: block;
    position: relative;
    padding-left: 18px;
    color: #fff;
    text-decoration: none;
}
.mp-ha-live:hover,
.mp-ha-live:focus { color: #fff; text-decoration: none; }
.mp-ha-live:hover .mp-ha-v { color: var(--primary, #F99E1F); }
.mp-ha-dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d4f;
    animation: mp-ha-pulse 1.6s ease-out infinite;
}
@keyframes mp-ha-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 77, 79, .65); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 77, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

.mp-ha-bar {
    height: 6px;
    margin-bottom: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}
.mp-ha-bar > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary, #F99E1F), #ffd08a);
    transition: width .4s ease;
}

/* --- desktop: three columns, the panel on the right --- */
@media (min-width: 993px) {
    .header.has-aside {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        justify-content: stretch;
        justify-items: start;
        column-gap: 28px;
    }
    .header.has-aside > .mp-head-logo { grid-column: 1; grid-row: 1; }
    .header.has-aside > .mp-head-text { grid-column: 2; grid-row: 1; }
    .header.has-aside > .mp-head-aside {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 320px;
    }
}

/* --- tablets: logo and name side by side, the panel underneath --- */
@media (min-width: 768px) and (max-width: 992px) {
    .header.has-aside {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        justify-content: stretch;
        justify-items: start;
    }
    .header.has-aside > .mp-head-logo { grid-column: 1; grid-row: 1; }
    .header.has-aside > .mp-head-text { grid-column: 2; grid-row: 1; }
    .header.has-aside > .mp-head-aside {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin-top: 14px;
    }
}

/* --- phones: the header is a flex column, so is the panel --- */
@media (max-width: 767px) {
    .header.has-aside > .mp-head-text,
    .header.has-aside > .mp-head-aside { width: 100%; max-width: none; }
    .mp-head-aside { padding: 12px 14px; }
}

/* v3.8 - on a phone the logo sits centred on its own line, so the meet name,
   town and date read as a caption under it rather than a paragraph shoved
   against the left edge. Applies with or without the aside, so an event page
   and the index look the same. The panel keeps its own left alignment: a
   label above a bar is a stat block, not a title. */
@media (max-width: 767px) {
    .header { text-align: center; }
    .header > h1, .header > h2, .header > h3,
    .header > h4, .header > h5, .header > h6 { text-align: center; }
    .header .mp-head-text {
        align-items: center;
        text-align: center;
    }
    .header .mp-head-logo,
    .header .col-md-4 { text-align: center; }
    .mp-head-aside { text-align: left; }
}

/* =================================================================
   v3.6  SHARE ONE EVENT
   ================================================================= */
.mp-ev-btn[data-mp-act="share"] .mp-ev-dot { background: #25D366; }

.mp-share-wrap {
    position: relative;
    display: inline-flex;
}
.mp-share-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 190px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--mp-border, #e2e8f0);
    box-shadow: 0 14px 30px rgba(16, 24, 32, .16);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mp-share-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mp-secondary, #101820);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.mp-share-item:hover,
.mp-share-item:focus {
    background: #f1f5f9;
    color: var(--mp-secondary, #101820);
    text-decoration: none;
}
.mp-share-item.is-raw {
    font-weight: 500;
    font-size: 11px;
    word-break: break-all;
    white-space: normal;
    cursor: text;
}

/* the menu must not push the card wider on a phone */
@media (max-width: 480px) {
    .mp-share-menu { left: auto; right: 0; min-width: 170px; }
}

/* =================================================================
   v3.9  PHONE: A SHORTER HEADER AND FOLDED FILTERS
   -------------------------------------------------------------
   Measured on a 390x844 phone before this block, with nothing live:
       header 316   nav 31   live panel 74   toolbar 162
       -> the first row of the timetable started at 824px, below the
          fold even before the browser's own bars are counted.
   The live panel is not the problem - it is 74px and it is the reason
   people open the page, so it stays where it is. The header and the
   toolbar are what to trim.
   ================================================================= */
@media (max-width: 767px) {
    .header {
        padding: 14px 16px;
        gap: 10px;
        margin-bottom: 16px;
    }
    .header img.logo {
        height: 68px;
        padding: 6px 8px;
        border-radius: 12px;
    }
    .mp-head-aside { padding: 10px 12px; }
    .mp-head-aside > * + * { margin-top: 8px; padding-top: 8px; }
    .mp-ha-v { font-size: 14px; }
    .mp-ha-bar { margin-bottom: 5px; }

    .mp-toolbar { margin-bottom: 12px; }

    /* the chips fold away behind the Filter button */
    .mp-toolbar .mp-toolbar-filters { display: none; }
    .mp-toolbar.is-filters-open .mp-toolbar-filters { display: flex; }

    .mp-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        padding: 7px 12px;
        border: 1px solid var(--mp-border, #e2e8f0);
        border-radius: 999px;
        background: #fff;
        color: var(--mp-secondary, #101820);
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.1;
        cursor: pointer;
        white-space: nowrap;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mp-filter-toggle .mp-filter-ico {
        width: 12px;
        height: 8px;
        flex: 0 0 auto;
        background: currentColor;
        /* three shrinking bars: the usual filter mark */
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px,
                                   0 3px, 75% 3px, 75% 5px, 0 5px,
                                   0 6px, 50% 6px, 50% 8px, 0 8px);
        clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px,
                           0 3px, 75% 3px, 75% 5px, 0 5px,
                           0 6px, 50% 6px, 50% 8px, 0 8px);
    }
    .mp-filter-toggle.is-on {
        background: var(--primary, #F99E1F);
        border-color: var(--primary, #F99E1F);
        color: #101820;
    }
    .mp-toolbar.is-filters-open .mp-filter-toggle {
        background: var(--mp-secondary, #101820);
        border-color: var(--mp-secondary, #101820);
        color: #fff;
    }
}

/* from a tablet up the chips are always out and the button does not exist */
@media (min-width: 768px) {
    .mp-filter-toggle { display: none; }
}

/* =================================================================
   v4.0  THE RUNWAY STRIP
   The one place the athlete is named outside the table had no flag
   (addFlagsToTeams only looks at td.team) and said nothing about the
   jump or throw that had just been recorded.
   ================================================================= */
.live-now-flag {
    width: 22px;
    height: auto;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(16, 24, 32, .12);
}

.live-now-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.live-now-attempt { margin-left: 0; }

.live-now-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 24, 32, .06);
    border: 1px solid rgba(16, 24, 32, .12);
    line-height: 1.2;
}
.live-now-mark-v {
    font-size: 15px;
    font-weight: 900;
    color: #101820;
}
.live-now-mark-x {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    color: #33475b;
}

/* the same reading the grid gives: cleared green, foul red, pass grey */
.live-now-mark.live-now-s-best,
.live-now-mark.live-now-s-cleared,
.live-now-mark.live-now-s-mark {
    background: rgba(22, 163, 74, .14);
    border-color: rgba(22, 163, 74, .38);
}
.live-now-mark.live-now-s-best .live-now-mark-x,
.live-now-mark.live-now-s-cleared .live-now-mark-x,
.live-now-mark.live-now-s-mark .live-now-mark-x { color: #15803d; }

.live-now-mark.live-now-s-foul {
    background: rgba(224, 49, 49, .12);
    border-color: rgba(224, 49, 49, .34);
}
.live-now-mark.live-now-s-foul .live-now-mark-v,
.live-now-mark.live-now-s-foul .live-now-mark-x { color: #c92a2a; }

.live-now-mark.live-now-s-passed {
    background: rgba(16, 24, 32, .05);
    border-color: rgba(16, 24, 32, .14);
}
.live-now-mark.live-now-s-passed .live-now-mark-v,
.live-now-mark.live-now-s-passed .live-now-mark-x { color: #6b7280; }

@media (max-width: 560px) {
    .live-now-right {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* =================================================================
   v4.1  FLAG SPACING, AND EVERY LIVE BOARD IN THE HEADER
   ================================================================= */

/* The track board's team cell was meant to be a flex row with a 6px gap,
   but `.team { display: table-cell !important }` in style.css wins over it,
   so the gap was never applied and `margin-right: 0` left the flag glued to
   the code. Give it the same 8px the results tables use. */
#live-results-target td.live-col-team img.team-flag {
    margin-right: 8px;
}

/* the runway strip reads flag-then-code, the same way every table does */
.live-now-team {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    color: #33475b;
}
.live-now-team .live-now-flag { margin-right: 8px; }
.live-now-team-code { line-height: 1; }

/* ---- the header panel lists every board that is running ---- */
.mp-ha-live {
    display: block;
    position: relative;
    padding-left: 18px;
    color: #fff;
    text-decoration: none;
}
a.mp-ha-live-item {
    display: block;
    color: #fff;
    text-decoration: none;
}
a.mp-ha-live-item + a.mp-ha-live-item { margin-top: 2px; }
a.mp-ha-live-item:hover,
a.mp-ha-live-item:focus {
    color: var(--primary, #F99E1F);
    text-decoration: none;
}
.mp-ha-more {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 700;
    opacity: .7;
}

/* =================================================================
   v4.2  THE TRACK BOARD ON A PHONE
   -------------------------------------------------------------
   Measured at 390px: the seven-column table wanted 447px inside a
   320px box, so PL was cut off the left edge and DELTA off the right
   and the whole thing had to be dragged sideways.

       PL 30 | LN 31 | # 38 | Name 65 | Team 170 | Final 56 | Delta 57

   Below 700px three of those go: the lane, the bib and the delta.
   The lane is not lost - it moves into the FINAL cell and sits there
   until the time arrives, which is what the FinishLynx board does.
   The delta is the gap to the leader, and the leader's time is on the
   same screen. A desktop keeps all seven exactly as before.
   ================================================================= */
.live-lane-inline { display: none; }

@media (max-width: 700px) {
    #live-results-target .live-results-table th.live-col-ln,
    #live-results-target .live-results-table td.live-col-ln,
    #live-results-target .live-results-table th.live-col-bib,
    #live-results-target .live-results-table td.live-col-bib,
    #live-results-target .live-results-table th.live-col-delta,
    #live-results-target .live-results-table td.live-col-delta {
        display: none !important;
    }

    #live-results-target .live-results-table .live-lane-inline {
        display: inline-block;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: .3px;
        color: #6b7280;
        opacity: .85;
    }

    /* with three columns gone the name and the team can breathe */
    #live-results-target .live-results-table th,
    #live-results-target .live-results-table td {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    /* a full club name ("UNIVERSITY OF TEXAS") held the team column at 163px
       because the cell is nowrap for the flag's sake - let both wrap on a
       phone or the table cannot shrink past 314px whatever else is dropped */
    #live-results-target .live-col-name,
    #live-results-target th.live-th-name,
    #live-results-target th.live-th-team { white-space: normal !important; }
    #live-results-target .live-col-team,
    #live-results-target .live-col-team .team-code {
        font-size: 12px !important;
        white-space: normal !important;
        word-break: break-word;
    }
    #live-results-target td.live-col-team img.team-flag {
        width: 24px;
        height: 16px;
        margin-right: 6px;
    }
}

/* =================================================================
   v4.4  CLUB LOGOS
   images/flags/ holds country flags (EGY.png, 3:2, a real flag) and
   club logos ("Dubai Police Club.gif", usually square or round, often
   on a transparent ground). The flag rules crop to 33x22 with a border
   and a shadow, which is right for a flag and wrong for a logo - it
   would slice the sides off a round crest and frame it like a photo.
   A logo keeps its own shape instead.
   ================================================================= */
img.team-flag.team-logo,
td.team img.team-flag.team-logo,
td.ath-team img.team-flag.team-logo,
#live-results-target td.live-col-team img.team-flag.team-logo,
.live-now-team img.team-flag.team-logo {
    width: auto !important;
    max-width: 34px;
    height: 22px !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

@media (max-width: 700px) {
    #live-results-target td.live-col-team img.team-flag.team-logo {
        max-width: 26px;
        height: 18px !important;
    }
}

/* a team with no mark at all should not keep the gap where one would be */
td.team.team-noflag .team-code,
td.ath-team.team-noflag .team-code { margin-left: 0; }

/* =================================================================
   v4.6  BETTER THAN THEIR ENTRY MARK
   Deliberately NOT called PB or SB. MeetPro has no such field - the
   manual has neither - and a seed is only the mark written at entry.
   This says the one thing the page can prove: they beat it, by this
   much. Quiet green, smaller than the mark, never louder than the
   result itself.
   ================================================================= */
.mp-seed-gain {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .28);
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .2px;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
}

/* on a phone the mark column is tight - keep the badge but shrink it */
@media (max-width: 560px) {
    .mp-seed-gain {
        margin-left: 4px;
        padding: 0 4px;
        font-size: 10px;
    }
}

/* =================================================================
   v4.8  LIVE BOARD ONLY   (any page + #live-only)
   MeetPro publishes the reports it generates and the asset folders -
   an extra .html of ours in the meet folder never goes up with it. So
   this is not a separate file: the page hides everything except the
   board, on a dark ground, with its own top bar. Nothing to upload,
   and it works on a meet that is already published.
   ================================================================= */
body.mp-live-only {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--secondary, #101820) !important;
    background-image: linear-gradient(160deg, #101820 0%, #16273a 55%, #101820 100%) !important;
    overflow-x: hidden;
}
/* everything the page normally is, out of the way */
body.mp-live-only > *:not(.mp-live-shell) { display: none !important; }

body.mp-live-only .mp-live-shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: 16px 16px 28px;
}

body.mp-live-only .mp-live-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 2px 16px;
}
body.mp-live-only .mp-live-back {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body.mp-live-only .mp-live-back:hover { background: rgba(255, 255, 255, .16); color: #fff; }

body.mp-live-only .mp-live-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}
body.mp-live-only .mp-live-logo {
    height: 46px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    background: #fff;
    padding: 5px 8px;
    border-radius: 10px;
}
body.mp-live-only .mp-live-meet {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mp-live-only .mp-live-full {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
body.mp-live-only .mp-live-full:hover { background: rgba(255, 255, 255, .16); }

/* the board itself gets the room, and never folds itself away here */
body.mp-live-only .live-scoreboard-box {
    margin: 0 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
body.mp-live-only .live-scoreboard-box.mp-live-idle .live-details-bar,
body.mp-live-only .live-scoreboard-box.mp-live-idle #live-results-target,
body.mp-live-only .live-scoreboard-box.mp-live-idle .live-time {
    display: block !important;
}
body.mp-live-only .live-scoreboard-box.mp-live-idle { padding: 26px !important; }
body.mp-live-only .live-title { font-size: 1.6rem; }
body.mp-live-only #live-results-target table.live-results-table tbody td,
body.mp-live-only #live-results-target .live-col-team,
body.mp-live-only #live-results-target .live-col-team .team-code,
body.mp-live-only #live-results-target .live-col-time,
body.mp-live-only #live-results-target .live-col-time-sub {
    font-size: 16px !important;
}

@media (max-width: 700px) {
    body.mp-live-only .mp-live-shell { padding: 10px 8px 18px; }
    body.mp-live-only .mp-live-meet { font-size: 15px; }
    body.mp-live-only .mp-live-logo { height: 34px; }
    body.mp-live-only .live-title { font-size: 1.15rem; }
    body.mp-live-only #live-results-target table.live-results-table tbody td,
    body.mp-live-only #live-results-target .live-col-team,
    body.mp-live-only #live-results-target .live-col-team .team-code,
    body.mp-live-only #live-results-target .live-col-time {
        font-size: 13px !important;
    }
}

/* ---- the button that gets you there, on the ordinary pages ---- */
.mp-live-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--secondary, #101820);
    border: 1px solid var(--secondary, #101820);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}
.mp-live-open:hover,
.mp-live-open:focus {
    background: var(--primary, #F99E1F);
    border-color: var(--primary, #F99E1F);
    color: #101820 !important;
}
.mp-live-open .mp-live-open-ico { font-size: 14px; line-height: 1; }

/* =================================================================
   v4.9  THE TRACK BOARD KEEPS ITS HEIGHT
   FinishLynx pages 8 lines at a time, so an 18-runner race arrives as
   8, 8, 2 - and the board used to collapse to two rows on that last
   page, jumping everything below it. The empty rows are real rows so
   the height never changes; they just have nothing written in them.
   ================================================================= */
#live-results-target .live-results-table tr.live-row-blank td {
    color: transparent;
    background: transparent;
}
#live-results-target .live-results-table tr.live-row-blank {
    background: transparent !important;
}
/* the striping should not draw attention to a row with nothing in it */
#live-results-target .live-results-table tr.live-row-blank:nth-child(even) td,
#live-results-target .live-results-table tr.live-row-blank:nth-child(odd) td {
    background: transparent !important;
}

/* A real row is as tall as the flag in its team cell. An empty one has no
   flag, so without this the padding rows are shorter and the board still
   changes height - just less obviously. This stands in for the flag. */
#live-results-target .live-results-table tr.live-row-blank td.live-col-team::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 24px;
    vertical-align: middle;
}
@media (max-width: 700px) {
    #live-results-target .live-results-table tr.live-row-blank td.live-col-team::after {
        height: 16px;
    }
}


/* =================================================================
   v5.0  THE BOARD GETS A HEADER, AND A LIGHT THAT TELLS THE TRUTH
   -----------------------------------------------------------------
   The "LIVE TRACK" pill is gone. It was green whether or not anything
   was running, so it was decoration, not information.

   In its place the "Live board only" link becomes the board's own
   header bar: full width, sitting straight on top of the box. The box
   already has a flat top edge and draws its teal line just under it,
   so the two read as one object. On the left is one dot - red and
   still means no event is running, green and breathing means at least
   one is. js sets data-live on the bar from the same sweep that folds
   the box away, so the dot cannot drift out of step with the board.
   ================================================================= */

/* the old pill, wherever it survives - including a meet folder still
   carrying an older template with the markup baked in */
.live-badge { display: none !important; }

/* Without the pill the left of the header is one short line of text while
   the clock beside it is three times as tall, which left the event name
   stranded at the top of a hole. Line the two up instead. */
.live-scoreboard-box .live-scoreboard-header { align-items: center; }

.mp-live-open {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 8px 0 0;
    padding: 11px 16px;
    border: 1px solid var(--secondary, #101820);
    border-radius: 6px 6px 0 0;
    background: var(--secondary, #101820);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* the header and the board are one thing, so nothing between them */
.mp-live-open + .live-scoreboard-box { margin-top: 0 !important; }

.mp-live-open .mp-live-open-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-live-open .mp-live-open-ico {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    opacity: .85;
}
.mp-live-open:hover,
.mp-live-open:focus {
    background: var(--primary, #F99E1F);
    border-color: var(--primary, #F99E1F);
    color: #101820 !important;
}
.mp-live-open:hover .mp-live-open-ico,
.mp-live-open:focus .mp-live-open-ico { opacity: 1; }

/* ---- the running light ---- */
.mp-live-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}
.mp-live-dot[data-live="1"] {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
    animation: mp-live-breathe 1.6s ease-in-out infinite;
}
@keyframes mp-live-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
/* a reader who has asked for less movement gets a steady green */
@media (prefers-reduced-motion: reduce) {
    .mp-live-dot[data-live="1"] { animation: none; }
}

/* ---- the same light on the live-only screen ---- */
body.mp-live-only .mp-live-brand .mp-live-dot {
    width: 11px;
    height: 11px;
    margin-right: 2px;
}

/* =================================================================
   v5.2  THE STANDALONE SCOREBOARD PAGE
   -----------------------------------------------------------------
   BTS-scoreboard/index.html is the live board and nothing else, for
   a meet with no results website. No meet logo, no meet name, no way
   back to a results page - just the wording, the running light and
   the board. The dark ground is painted on <body> straight away so
   there is no white flash before the js lifts the box into the shell.
   ================================================================= */
body.mp-live-standalone-body {
    margin: 0;
    background: #101820;
    background-image: linear-gradient(160deg, #101820 0%, #16273a 55%, #101820 100%);
    background-attachment: fixed;
    min-height: 100vh;
}
/* before the js runs, the bare box must not sit on a white page */
body.mp-live-standalone-body:not(.mp-live-only) .live-scoreboard-box {
    max-width: 1500px;
    margin: 16px auto 28px;
}

body.mp-live-alone .mp-live-brand.is-standalone {
    gap: 14px;
    margin-left: 0;
    margin-right: auto;
}
body.mp-live-alone .mp-live-brand.is-standalone .mp-live-meet {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mp-live-alone .mp-live-top { padding: 8px 2px 16px; }

/* =================================================================
   v5.6  THE MEET'S OWN BADGE ON ITS OWN live.html
   -----------------------------------------------------------------
   The copy of live.html that sits in a meet folder is a page of that
   meet's site, so it carries the meet's logo, name, town and date -
   read out of index.html beside it. Only the always-on board at
   BTS-scoreboard/ keeps the fixed wording instead.
   ================================================================= */
body.mp-live-only .mp-live-brand.is-meet {
    gap: 14px;
    margin-left: 0;
    margin-right: auto;
    align-items: center;
    min-width: 0;
}
body.mp-live-only .mp-live-brand.is-meet .mp-live-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
}
body.mp-live-only .mp-live-brand.is-meet .mp-live-meet {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .2px;
    text-transform: none;
}
body.mp-live-only .mp-live-where {
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* the fixed-wording board has no second line to make room for */
body.mp-live-alone .mp-live-brand.is-standalone .mp-live-lines { display: block; }

@media (max-width: 700px) {
    body.mp-live-only .mp-live-brand.is-meet .mp-live-meet { font-size: 14px; }
    body.mp-live-only .mp-live-where { font-size: 10.5px; margin-top: 1px; }
}
@media (max-width: 420px) {
    body.mp-live-only .mp-live-brand.is-meet .mp-live-meet { font-size: 12px; }
    body.mp-live-only .mp-live-where { display: none; }
}

@media (max-width: 700px) {
    body.mp-live-alone .mp-live-brand.is-standalone .mp-live-meet {
        font-size: 13px;
        letter-spacing: 1.1px;
    }
}
@media (max-width: 420px) {
    body.mp-live-alone .mp-live-brand.is-standalone .mp-live-meet {
        font-size: 11px;
        letter-spacing: .6px;
    }
}

/* =================================================================
   v5.0  THE TWO BUTTONS ON THE LIVE-ONLY SCREEN
   Full screen never answered on a phone: iOS Safari has no
   Element.requestFullscreen, so the tap fell into an empty function.
   It now falls back to covering the page itself, and a second button
   turns the board sideways for the extra width. Both are 44px, which
   is the smallest thing a thumb can reliably hit.
   ================================================================= */
body.mp-live-only .mp-live-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.mp-live-only .mp-live-full,
body.mp-live-only .mp-live-rot {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
body.mp-live-only .mp-live-full:hover,
body.mp-live-only .mp-live-rot:hover { background: rgba(255, 255, 255, .16); }
body.mp-live-only .mp-live-full.is-on,
body.mp-live-only .mp-live-rot.is-on {
    background: var(--primary, #F99E1F);
    border-color: var(--primary, #F99E1F);
    color: #101820;
}
body.mp-live-only .mp-live-rot[hidden] { display: none !important; }
body.mp-live-only .mp-live-back {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ---- full screen we do ourselves, when the browser will not ---- */
body.mp-live-only.mp-live-faux-full { overflow: hidden; }
body.mp-live-only.mp-live-faux-full .mp-live-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    max-width: none;
    padding: 10px 10px 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-image: linear-gradient(160deg, #101820 0%, #16273a 55%, #101820 100%);
}

/* ---- sideways ---- */
body.mp-live-only.mp-live-rotate { overflow: hidden; }
body.mp-live-only.mp-live-rotate .mp-live-shell {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vh;
    height: 100vw;
    max-width: none;
    padding: 10px 14px 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: rotate(90deg) translate(0, -100%);
    transform-origin: top left;
    background-image: linear-gradient(160deg, #101820 0%, #16273a 55%, #101820 100%);
}
/* the address bar on a phone moves, and vh does not follow it - dvh does */
@supports (height: 100dvw) {
    body.mp-live-only.mp-live-rotate .mp-live-shell {
        width: 100dvh;
        height: 100dvw;
    }
}
/* Turned sideways the board is wide but only as tall as the phone is
   broad - about 390px on the common ones. Every pixel the heading, the
   clock and the details strip give back is another line of the race, so
   they are packed down while the turn lasts. */
body.mp-live-only.mp-live-rotate .mp-live-top { padding: 2px 2px 6px; }
body.mp-live-only.mp-live-rotate .mp-live-logo { height: 26px; }
body.mp-live-only.mp-live-rotate .mp-live-meet { font-size: 13px; }
body.mp-live-only.mp-live-rotate .mp-live-back { min-height: 34px; padding: 5px 10px; }
body.mp-live-only.mp-live-rotate .mp-live-full,
body.mp-live-only.mp-live-rotate .mp-live-rot {
    width: 38px;
    height: 38px;
    font-size: 15px;
}
body.mp-live-only.mp-live-rotate .live-scoreboard-box {
    padding: 12px 14px 12px !important;
}
body.mp-live-only.mp-live-rotate .live-scoreboard-header { margin-bottom: 6px !important; }
body.mp-live-only.mp-live-rotate .live-title { font-size: 1.15rem; margin: 0; }
body.mp-live-only.mp-live-rotate .live-time { padding: 5px 12px 7px; min-width: 120px; }
body.mp-live-only.mp-live-rotate .live-time-label {
    font-size: 9px;
    margin-bottom: 3px;
}
body.mp-live-only.mp-live-rotate #live-clock,
body.mp-live-only.mp-live-rotate .live-field-clock {
    font-size: 1.25rem !important;
    padding: 6px 8px !important;
}
body.mp-live-only.mp-live-rotate .live-details-bar {
    padding: 5px 10px !important;
    margin-bottom: 6px !important;
}
body.mp-live-only.mp-live-rotate .live-tabs { margin-bottom: 6px !important; }

@media (max-width: 700px) {
    .mp-live-open {
        padding: 10px 12px;
        font-size: 11px;
        letter-spacing: .6px;
        gap: 8px;
    }
    body.mp-live-only .mp-live-top { gap: 8px; }
    body.mp-live-only .mp-live-back { padding: 7px 11px; font-size: 12px; }
}

/* =================================================================
   v5.1  THE PERF COLUMN ON THE SUMMARY
   -----------------------------------------------------------------
   The entry-mark reading used to be a badge glued onto the mark, and
   it only appeared when somebody had beaten their entry mark - so an
   event where nobody did looked exactly like an event the code had
   never reached, and there was no way to tell working from broken.

   It is a column of its own now, next to Time / Mark. Green up for
   better than the mark they were entered with, grey down for under
   it - under is the normal case at a good meet and is not a
   telling-off, so it is never red.
   ================================================================= */
/* v5.6 - as narrow as it can be made. It was 53px, the same as the Mark
   column, and it was taking that width off Team, which pushed the flag onto
   its own line above the country code. Small type, tight padding, no unit
   (the Mark beside it carries that), and never a line break. */
table.mp-summary-table th.mp-perf-col,
table.mp-summary-table td.mp-perf-col {
    text-align: right;
    white-space: nowrap;
    width: 1px;
    padding-left: 4px !important;
    padding-right: 6px !important;
    font-variant-numeric: tabular-nums;
}
table.mp-summary-table th.mp-perf-col {
    font-size: 9.5px;
    letter-spacing: .2px;
}
table.mp-summary-table td.mp-perf-col {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}
/* v5.6 - !important, and it is not laziness. The colours were being painted
   over by

     .container table.table:not(.horizontal-table):not(.vertical-table)
              :not(.splits-table):not(.records-table) > tbody > tr > td { color:#111 }

   which is four :not() classes' worth of specificity ahead of anything
   sensible written here. Matching it selector for selector would be worse to
   read than this, and nothing else sets !important on the colour of a cell.
   Green beat the entry mark, red came under it, grey landed on it or has
   nothing to compare with. */
table.mp-summary-table td.mp-perf-col.is-up    { color: #15803d !important; }
table.mp-summary-table td.mp-perf-col.is-down  { color: #dc2626 !important; }
table.mp-summary-table td.mp-perf-col.is-same  { color: #6b7280 !important; font-weight: 700; }
table.mp-summary-table td.mp-perf-col.is-none  { color: #b9bfc7 !important; font-weight: 600; }

@media (max-width: 700px) {
    table.mp-summary-table th.mp-perf-col,
    table.mp-summary-table td.mp-perf-col {
        padding-left: 2px !important;
        padding-right: 4px !important;
    }
    table.mp-summary-table th.mp-perf-col { font-size: 8px; }
    table.mp-summary-table td.mp-perf-col { font-size: 9.5px; }
}

/* =================================================================
   v5.1  PRINTING THE SUMMARY
   -----------------------------------------------------------------
   A printer button and nothing else - no PDF, no Excel, no Share.

   The meet header and the footer repeat on every printed page
   because the whole sheet is one table and they are its <thead> and
   <tfoot>; a browser repeats those on each page. position:fixed was
   tried first and does not survive the page margin.
   ================================================================= */
.mp-sum-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--mp-border, #dde3ea);
    background: #fff;
    color: var(--mp-secondary, #101820);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
}
.mp-sum-print:hover {
    background: var(--mp-primary, #F99E1F);
    border-color: var(--mp-primary, #F99E1F);
    color: #101820;
}
.mp-sum-print-ico { font-size: 14px; line-height: 1; }

/* off screen until the print dialog opens */
.mp-print-root { display: none; }

@media print {
    body.mp-printing-summary > *:not(.mp-print-root) { display: none !important; }

    body.mp-printing-summary .mp-print-root {
        display: block;
        background: #fff;
        color: #111;
    }

    /* v5.2 - the header was sitting almost on the top edge of the paper and
       the footer on the bottom one, so page 1's footer and page 2's header
       nearly touched across the fold. Give the sheet a real margin, and put
       air under the header and over the footer as well. */
    @page { size: A4 portrait; margin: 16mm 12mm 15mm; }

    table.mp-print-sheet {
        width: 100%;
        border-collapse: collapse;
    }
    /* this is what repeats them - do not change it to a div */
    table.mp-print-sheet > thead { display: table-header-group; }
    table.mp-print-sheet > tfoot { display: table-footer-group; }
    table.mp-print-sheet > thead > tr > td,
    table.mp-print-sheet > tfoot > tr > td,
    table.mp-print-sheet > tbody > tr > td { padding: 0; border: 0; }

    body.mp-printing-summary .mp-pdf-head { padding-bottom: 8px; margin-bottom: 16px; }
    body.mp-printing-summary img.mp-pdf-logo { height: 52px; }
    body.mp-printing-summary .mp-pdf-name { font-size: 18px; }
    body.mp-printing-summary .mp-pdf-town { font-size: 12px; }
    body.mp-printing-summary .mp-pdf-date { font-size: 11px; }
    body.mp-printing-summary .mp-pdf-foot { margin-top: 16px; padding-top: 8px; }
    body.mp-printing-summary .mp-pdf-foot-logos img { height: 26px; }

    .mp-print-title {
        font-size: 17px;
        font-weight: 800;
        margin: 4px 0 2px;
        color: #111;
    }
    .mp-print-sub { font-size: 11px; color: #555; margin-bottom: 8px; }

    /* an event never starts on one page and finishes on the next unless it
       is too big to fit at all, and no row is ever cut in half */
    body.mp-printing-summary .mp-sum-event {
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 0 10px;
        border: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none;
    }
    body.mp-printing-summary .mp-sum-event tr,
    body.mp-printing-summary .mp-sum-event thead {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* a long event that has to be split still carries its column headings */
    body.mp-printing-summary .mp-sum-event thead { display: table-header-group; }

    body.mp-printing-summary .mp-sum-head {
        background: #f2f4f7;
        color: #111;
        padding: 6px 8px;
        border-bottom: 1px solid #ccc;
    }
    body.mp-printing-summary .mp-ev-num,
    body.mp-printing-summary .mp-ev-name,
    body.mp-printing-summary .mp-badge { color: #111; }
    body.mp-printing-summary table.mp-summary-table { width: 100%; font-size: 11px; }
    body.mp-printing-summary table.mp-summary-table th,
    body.mp-printing-summary table.mp-summary-table td {
        border: 1px solid #d5d9de;
        padding: 3px 6px;
    }
    body.mp-printing-summary .table-scroll { overflow: visible !important; }
    body.mp-printing-summary td.mp-perf-col.is-up   { color: #15803d; }
    body.mp-printing-summary td.mp-perf-col.is-down { color: #dc2626; }
}

/* =================================================================
   v5.6  MAKING THE PERF COLUMN ACTUALLY SMALL
   -----------------------------------------------------------------
   It stayed 52px wide - the same as Mark - however small the type was
   set, because every cell in a summary table is claimed by

     .container table.table:not(...4 of them...) > tbody > tr > td
         { font-size: 12.5px !important; padding: 6px 6px !important }

   which carries four :not() classes of specificity AND !important.
   Nothing shorter than the same selector plus one more class can get
   past it, so that is what this is. The width it gives back goes to
   Team, which had been squeezed until the flag sat on its own line
   above the country code.
   ================================================================= */
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col {
    padding: 6px 5px 6px 3px !important;
    text-align: right !important;
    white-space: nowrap !important;
    width: 1px;
    font-variant-numeric: tabular-nums;
}
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col {
    font-size: 9.5px !important;
    letter-spacing: .2px;
}
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col {
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 0;
}

/* and the flag must never be knocked onto its own line above the country
   code - the same !important chain has to be answered here too */
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.team,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.team {
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col {
        padding: 6px 4px 6px 2px !important;
    }
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > thead > tr > th.mp-perf-col { font-size: 8px !important; }
    .container table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col,
.container-fluid table.table:not(.horizontal-table):not(.vertical-table):not(.splits-table):not(.records-table) > tbody > tr > td.mp-perf-col { font-size: 9.5px !important; }
}

/* THE ACTUAL LAST BLOCK: the smallest phones still in use.
   This has to sit after the timetable scale block above, which uses
   !important - otherwise these never win.
   Shave the last few pixels so the readable wording still fits so the
   readable wording still fits instead of falling back to initials */
@media (max-width: 380px) {
    .container table.table.mp-schedule > thead > tr > th,
    .container-fluid table.table.mp-schedule > thead > tr > th,
    .container table.table.mp-schedule > tbody > tr > td ,
    .container-fluid table.table.mp-schedule > tbody > tr > td {
        padding: 5px 2px !important;
    }
    table.mp-schedule td.mp-c-slist a,
    table.mp-schedule td.mp-c-res a,
    table.mp-schedule td.mp-c-entries a,
    table.mp-schedule td.mp-c-plist a {
        padding: 2px 3px;
        font-size: 8px;
    }
    .container table.table.mp-schedule > thead > tr > th.mp-c-status,
    .container-fluid table.table.mp-schedule > thead > tr > th.mp-c-status,
    .container table.table.mp-schedule > tbody > tr > td.mp-c-status ,
    .container-fluid table.table.mp-schedule > tbody > tr > td.mp-c-status {
        font-size: 8px !important;
    }
}