/* Tap a wave score of a finished heat to see each judge's score (judge-split.js). The score keeps its look: the
   same text with a faint dotted underline, and a tap area of at least 44 x 40 px drawn around it without moving the
   table. The card is light on every page. */
.js-split {
    position: relative;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: rgba(14, 107, 130, 0.55);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}
.js-split::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 40px; transform: translate(-50%, -50%); }
.js-split[aria-expanded="true"] { border-radius: 4px; background: #E1F4F8; box-shadow: 0 0 0 3px #E1F4F8; text-decoration-color: transparent; }
.js-split:focus-visible { border-radius: 4px; outline: 2px solid #0891B2; outline-offset: 2px; }

.js-split-card {
    position: fixed;
    z-index: 2000;
    display: grid;
    gap: 6px;
    width: 248px;
    max-width: calc(100vw - 16px);
    padding: 12px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(6, 47, 56, 0.28), 0 0 0 1px rgba(11, 79, 94, 0.12);
    color: #0B2730;
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
}
.js-split-card::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--js-split-arrow, 50%);
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    box-shadow: -1px -1px 0 rgba(11, 79, 94, 0.12);
    transform: translateX(-50%) rotate(45deg);
}
.js-split-card.is-up::before { top: auto; bottom: -6px; box-shadow: 1px 1px 0 rgba(11, 79, 94, 0.12); }
@media (prefers-reduced-motion: no-preference) {
    .js-split-card { animation: js-split-in 0.14s ease-out; }
    @keyframes js-split-in { from { opacity: 0; transform: translateY(-3px); } }
}
.js-split-card__x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #4A6770;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.js-split-card__x:focus-visible { outline: 2px solid #0891B2; }
.js-split-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-right: 36px; }
.js-split-card__wave { font-size: 13px; font-weight: 700; color: #4A6770; }
.js-split-card__score { font-family: "Unbounded", "Segoe UI", system-ui, sans-serif; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: #0B2730; }
.js-split-card__who { margin-top: -4px; overflow-wrap: anywhere; font-size: 13px; color: #4A6770; }
.js-split-card__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.js-split-card__rows li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #E3EEF1; font-variant-numeric: tabular-nums; color: #3C5A63; }
.js-split-card__v { font-weight: 700; color: #0B2730; }
.js-split-card__rows li.is-out .js-split-card__v { font-weight: 500; color: #6B8188; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.js-split-card__out { font-size: 12.5px; color: #6B8188; }
.js-split-card__rows li.is-missed .js-split-card__v { font-weight: 600; color: #874805; }
.js-split-card__foot { margin: 0; padding-top: 6px; border-top: 1px solid #E3EEF1; font-size: 12.5px; color: #4A6770; }
.js-split-card__foot + .js-split-card__foot { padding-top: 0; border-top: 0; }
.js-split-card__foot.is-warn { color: #874805; }
.js-split-card__msg { margin: 0; font-size: 13px; color: #4A6770; }

/* A judge who missed the ride: the no-signal icon (the word is for screen readers) */
.js-split-nosig { display: block; }
.js-split-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Compact card, when there is no room for the full one (judge-split.js place): the judges side by side in two
   columns, a smaller score, so every judge shows without scrolling */
.js-split-card.is-compact { width: 300px; gap: 4px; padding: 10px 12px; }
.js-split-card.is-compact .js-split-card__score { font-size: 17px; }
.js-split-card.is-compact .js-split-card__rows { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.js-split-card.is-compact .js-split-card__rows li { padding: 3px 0; }
.js-split-card.is-compact .js-split-card__out { display: none; }
.js-split-card.is-compact .js-split-card__foot { padding-top: 4px; font-size: 12px; }
.js-split-card.is-compact .js-split-card__x { width: 32px; height: 32px; }