/*
 * ============================================================
 *  XALLENGER — Card Components
 *  File: wwwroot/css/xal-cards.css
 *
 *  Consolidated card component styles for:
 *    1. Bout Card (Compact + Expanded / Tale of the Tape)
 *    2. Boxer Card (Compact + Expanded)
 *    3. Bracket Card + Detail Panel
 *
 *  Requires: xal-tokens.css (import FIRST)
 *
 *  Usage:
 *    <link rel="stylesheet" href="css/xal-tokens.css" />
 *    <link rel="stylesheet" href="css/xal-cards.css" />
 * ============================================================
 */

/* ============================================================
   1. SHOW CARD  (.xal-show-card)
   ============================================================ */

.xal-show-card {
    background: var(--xal-bg-card);
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

    .xal-show-card:hover {
        border-color: var(--xal-gold-border);
        box-shadow: var(--xal-shadow-gold);
    }

/* Flyer image zone */
.xal-show-card__flyer {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--xal-bg-surface);
    flex-shrink: 0;
}

    .xal-show-card__flyer img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

.xal-show-card:hover .xal-show-card__flyer img {
    transform: scale(1.03);
}

.xal-show-card__flyer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.50) 70%, rgba(30,30,30,1) 100%);
    pointer-events: none;
}

.xal-show-card__flyer--placeholder {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xal-show-card__flyer-placeholder-text {
    text-align: center;
    padding: 20px;
    z-index: 1;
}

    .xal-show-card__flyer-placeholder-text .title {
        font-size: var(--xal-font-xl);
        font-weight: 900;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .xal-show-card__flyer-placeholder-text .sub {
        font-size: var(--xal-font-xs);
        font-weight: 700;
        color: var(--xal-gold);
        text-transform: uppercase;
        letter-spacing: 2px;
    }

.xal-show-card__status {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.xal-show-card__share {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--xal-radius-pill);
    color: var(--xal-text-secondary);
    font-size: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--xal-transition-fast);
}

    .xal-show-card__share:hover {
        color: var(--xal-gold);
        border-color: var(--xal-gold-border);
    }

.xal-show-card__organizer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 8px;
}

.xal-show-card__org-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--xal-bg-surface);
    border: 1.5px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--xal-text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}

.xal-show-card__org-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.80);
    line-height: 1.2;
}

.xal-show-card__org-role {
    font-size: var(--xal-t-caption-size);
    color: var(--xal-text-muted);
}

/* Card body */
.xal-show-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.xal-show-card__title {
    font-size: var(--xal-font-xl);
    font-weight: 800;
    color: var(--xal-text);
    line-height: 1.25;
}

/* Stats strip */
.xal-show-card__stats {
    display: flex;
    border: 1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
    overflow: hidden;
}

.xal-show-card__stat {
    flex: 1;
    padding: 7px 8px;
    text-align: center;
    border-right: 1px solid var(--xal-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .xal-show-card__stat:last-child {
        border-right: none;
    }

.xal-show-card__stat-icon {
    font-size: 12px;
    line-height: 1;
}

.xal-show-card__stat-value {
    font-size: var(--xal-font-base);
    font-weight: 700;
    color: var(--xal-gold);
    line-height: 1.2;
}

.xal-show-card__stat-label {
    font-size: var(--xal-t-kpi-label-size);
    color: var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xal-show-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--xal-font-base);
    color: var(--xal-status-open);
}

.xal-show-card__actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: auto;
}

    .xal-show-card__actions .xal-btn {
        font-size: var(--xal-font-base);
        padding: 9px 14px;
    }

/* Detail rows */
.xal-show-card__detail-rows {
    display: none;
    flex-direction: column;
    border: 1px solid var(--xal-border);
    border-radius: var(--xal-radius-md);
    overflow: hidden;
}

.xal-show-card__detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--xal-border);
    font-size: var(--xal-font-base);
}

    .xal-show-card__detail-row:last-child {
        border-bottom: none;
    }

.xal-show-card__detail-icon {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.xal-show-card__detail-label {
    color: var(--xal-text-muted);
    font-size: var(--xal-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 80px;
    flex-shrink: 0;
}

.xal-show-card__detail-value {
    color: var(--xal-text-secondary);
    flex: 1;
}

.xal-show-card__detail-value--gold {
    color: var(--xal-gold);
    font-weight: 700;
}

/* Expanded modifier */
.xal-show-card--expanded .xal-show-card__flyer {
    aspect-ratio: 16 / 9;
}

.xal-show-card--expanded .xal-show-card__title {
    font-size: var(--xal-font-xl);
}

.xal-show-card--expanded .xal-show-card__body {
    padding: 16px 20px 20px;
}

.xal-show-card--expanded .xal-show-card__stat {
    padding: 10px 12px;
}

.xal-show-card--expanded .xal-show-card__stat-value {
    font-size: var(--xal-font-md);
}

.xal-show-card--expanded .xal-show-card__detail-rows {
    display: flex;
}

.xal-show-card--expanded .xal-show-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

    .xal-show-card--expanded .xal-show-card__actions .xal-btn {
        flex: 1;
        min-width: 130px;
        padding: 10px 16px;
        font-size: 12px;
    }


/* ============================================================
   SECTION 1 — BOUT CARD
   Root: .xal-bout-card
   Variants:
     Compact  — default, with optional .xal-bout-card--hide-sequence
     Expanded — .xal-bout-tape inside .xal-bout-card
   ============================================================ */

/* ── 1a. Root ──────────────────────────────────────────────── */

.xal-bout-card {
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border-card, var(--xal-border));
  border-radius: var(--xal-radius-lg);
  overflow: hidden;
  position: relative;
}


/* ── 1b. Header (shared: compact + expanded) ───────────────── */

.xal-bout-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--xal-border);
}

/* Bout number badge */
.xal-bout-card__bout-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--xal-gold-muted);
  border: 1px solid var(--xal-gold-border);
  border-radius: var(--xal-radius-sm);
  min-width: 38px;
  padding: 4px 6px;
  flex-shrink: 0;
}

.xal-bout-card__bout-num-value {
  font-size: var(--xal-font-xl);
  font-weight: 900;
  color: var(--xal-gold);
  line-height: 1;
}

.xal-bout-card__bout-num-label {
  font-size: var(--xal-t-kpi-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xal-gold);
  opacity: 0.7;
}

/* Modifier: suppress bout number outside Bout Sheet context */
.xal-bout-card--hide-sequence .xal-bout-card__bout-num {
  display: none;
}

/* Header meta (weight class + division tags) */
.xal-bout-card__header-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xal-bout-card__weight-class {
  font-size: var(--xal-font-md);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xal-bout-card__division {
  font-size: var(--xal-font-sm);
  font-weight: 600;
  color: var(--xal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Bout status badge */
.xal-bout-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.xal-bout-card__status--scheduled {
  background: var(--xal-status-checkedin-bg);
  color: var(--xal-status-checkedin);
  border: 1px solid var(--xal-status-checkedin-border);
}

.xal-bout-card__status--confirmed {
  background: var(--xal-status-confirmed-bg);
  color: var(--xal-status-confirmed);
  border: 1px solid var(--xal-status-confirmed-border);
}

.xal-bout-card__status--complete {
  background: var(--xal-gold-muted);
  color: var(--xal-gold);
  border: 1px solid var(--xal-gold-border);
}

.xal-bout-card__status--cancelled {
  background: var(--xal-status-withdrawn-bg);
  color: var(--xal-status-withdrawn);
  border: 1px solid var(--xal-status-withdrawn-border);
}

.xal-bout-card__status--male {
    background: var(--xal-status-male-bg);
    color: var(--xal-status-male);
    border: 1px solid var(--xal-status-male-border);
}

.xal-bout-card__status--female {
    background: var(--xal-status-female-bg);
    color: var(--xal-status-female);
    border: 1px solid var(--xal-status-female-border);
}


/* ── 1c. Compact — Fighters Row ────────────────────────────── */

.xal-bout-card__fighters {
  display: flex;
  align-items: stretch;
  padding: 10px 14px;
  gap: 0;
}

.xal-bout-card__fighter {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xal-bout-card__fighter--red  { align-items: flex-start; padding-right: 10px; }
.xal-bout-card__fighter--blue { align-items: flex-end;   padding-left: 10px; }

/* Fighter avatar */
.xal-bout-card__avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--xal-font-lg);
  font-weight: 800;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.xal-bout-card__avatar--red {
  background: var(--xal-corner-red-bg);
  border: 2px solid var(--xal-corner-red-glow);
  color: #FF6B6B;
}

.xal-bout-card__avatar--blue {
  background: var(--xal-corner-blue-bg);
  border: 2px solid var(--xal-corner-blue-glow);
  color: #7AADFF;
}

/* Corner label pill */
.xal-bout-card__corner-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.xal-bout-card__corner-label--red {
  background: var(--xal-corner-red-bg);
  color: var(--xal-corner-red);
  border: 1px solid var(--xal-corner-red-glow);
}

.xal-bout-card__corner-label--blue {
  background: var(--xal-corner-blue-bg);
  color: var(--xal-corner-blue);
  border: 1px solid var(--xal-corner-blue-glow);
}

/* Fighter name */
.xal-bout-card__fighter-name {
  font-size: var(--xal-font-md);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.xal-bout-card__fighter--blue .xal-bout-card__fighter-name {
  text-align: right;
}

/* Corner names get two lines before truncating. On a 375px card each corner
   column is only ~140px wide, and a single ellipsised line cuts the surname —
   the part that actually identifies the boxer. Reserving both lines keeps the
   red and blue columns the same height so the gym and weight rows stay level
   across the VS spine. Covers the cards that style the name with the generic
   .xal-card-title as well as the ones using the BEM element. */
.xal-bout-card__fighters .xal-bout-card__fighter-name,
.xal-bout-card__fighters .xal-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  width: 100%;
  line-height: 1.2;
  min-height: 2.4em;
}

.xal-bout-card__fighter--blue .xal-card-title {
  text-align: right;
}

/* Fighter gym */
.xal-bout-card__fighter-gym {
  font-size: var(--xal-font-md);
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.xal-bout-card__fighter--blue .xal-bout-card__fighter-gym {
  text-align: right;
}

/* Per-fighter confirmation status */
.xal-bout-card__confirm-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--xal-font-xs);
  font-weight: 700;
  margin-top: 2px;
}

.xal-bout-card__confirm-status--confirmed { color: var(--xal-status-confirmed); }
.xal-bout-card__confirm-status--pending   { color: var(--xal-status-pending); }
.xal-bout-card__confirm-status--declined  { color: var(--xal-status-withdrawn); }

/* VS spine */
.xal-bout-card__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  padding: 0 4px;
}

.xal-bout-card__vs-text {
  font-size: var(--xal-font-base);
  font-weight: 900;
  color: var(--xal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.xal-bout-card__vs-divider {
  width: 1px;
  flex: 1;
  background: var(--xal-border);
  min-height: 8px;
  margin: 3px 0;
}


/* ── 1d. Compact — Weight Strip ────────────────────────────── */

.xal-bout-card__weight-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 8px;
  border-top: 1px solid var(--xal-border);
}

.xal-bout-card__weight-val {
  font-size: var(--xal-font-md);
  font-weight: 700;
  color: var(--xal-gold);
}

.xal-bout-card__weight-range {
  font-size: var(--xal-font-md);
  color: var(--xal-text-primary);
}


/* ── 1e. Compact — Admin Action Strip ──────────────────────── */

.xal-bout-card__admin-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--xal-border);
  flex-wrap: wrap;
}

.xal-bout-card__admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--xal-radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--xal-font-family);
  font-size: var(--xal-font-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: var(--xal-transition-fast);
}

.xal-bout-card__admin-btn:hover { opacity: 0.82; }

/* Inside the strip, buttons share the row equally at tap-target size;
   Confirm is transient + workflow-critical, so it takes a full row of its own. */
.xal-bout-card__admin-strip .xal-bout-card__admin-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  min-height: 44px;
}

.xal-bout-card__admin-strip .xal-bout-card__admin-btn--confirm {
  flex: 1 1 100%;
  font-size: var(--xal-font-md);
}

.xal-bout-card__admin-btn--confirm {
  background: var(--xal-status-confirmed-bg);
  color: var(--xal-status-confirmed);
  border: 1px solid var(--xal-status-confirmed-border);
}

.xal-bout-card__admin-btn--swap {
  background: var(--xal-bg-hover);
  color: var(--xal-text-secondary);
  border: 1px solid var(--xal-border-card);
}

.xal-bout-card__admin-btn--edit {
  background: var(--xal-bg-hover);
  color: var(--xal-text-secondary);
  border: 1px solid var(--xal-border-card);
}

.xal-bout-card__admin-btn--remove {
  background: var(--xal-status-unmatched-bg);
  color: var(--xal-status-unmatched);
  border: 1px solid var(--xal-status-unmatched-border);
}


/* ── 1f. Expanded — Tale of the Tape ──────────────────────── */
/*
 * CSS Grid alignment fix:
 *   grid-template-columns: 1fr 68px 1fr applied to BOTH
 *   .xal-bout-tape__fighters AND every .xal-bout-tape__row
 *   so the 68px spine column anchors fighter header + all stat rows.
 */

.xal-bout-tape {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Fighter header row — CSS Grid for perfect column alignment */
.xal-bout-tape__fighters {
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--xal-border);
  gap: 0;
}

/* min-width: 0 lets the 1fr tracks shrink below max-content so long gym/location
   lines truncate (ellipsis) instead of widening the whole card. */
.xal-bout-tape__fighter-red  { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.xal-bout-tape__fighter-blue { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; min-width: 0; }

.xal-bout-tape__fighter-cell {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
}

/* Avatar in tape header */
.xal-bout-tape__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--xal-font-lg);
  font-weight: 800;
  flex-shrink: 0;
  margin-bottom: 5px;
}

.xal-bout-tape__avatar--red {
  background: var(--xal-corner-red-bg);
  border: 2px solid var(--xal-corner-red-glow);
  color: #FF6B6B;
}

.xal-bout-tape__avatar--blue {
  background: var(--xal-corner-blue-bg);
  border: 2px solid var(--xal-corner-blue-glow);
  color: #7AADFF;
}

/* VS spine */
.xal-bout-tape__spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  gap: 4px;
}

.xal-bout-tape__spine-vs {
  font-size: var(--xal-font-sm);
  font-weight: 900;
  color: var(--xal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xal-bout-tape__spine-line {
  width: 1px;
  height: 24px;
  background: var(--xal-border);
}

/* Corner label pill in tape header */
.xal-bout-tape__corner-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}

.xal-bout-tape__corner-label--red {
  background: var(--xal-corner-red-bg);
  color: var(--xal-corner-red);
  border: 1px solid var(--xal-corner-red-glow);
}

.xal-bout-tape__corner-label--blue {
  background: var(--xal-corner-blue-bg);
  color: var(--xal-corner-blue);
  border: 1px solid var(--xal-corner-blue-glow);
}

/* Fighter name in tape header */
.xal-bout-tape__fighter-name {
  font-size: var(--xal-font-md);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Blue corner: right-align name + gym */
.xal-bout-tape__fighter-blue .xal-bout-tape__fighter-name {
  text-align: right;
}

.xal-bout-tape__fighter-gym {
  font-size: var(--xal-font-sm);
  color: var(--xal-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.xal-bout-tape__fighter-blue .xal-bout-tape__fighter-gym {
  text-align: right;
}

/* Stat rows — CSS Grid: same 1fr 68px 1fr column template */
.xal-bout-tape__row {
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid var(--xal-border);
  min-height: 34px;
}

.xal-bout-tape__row:last-child {
  border-bottom: none;
}

.xal-bout-tape__row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.xal-bout-tape__cell {
  min-height: 22px;
  display: flex;
  align-items: center;
}

.xal-bout-tape__cell--red  { justify-content: flex-start; }
.xal-bout-tape__cell--blue { justify-content: flex-end; }

.xal-bout-tape__cell-value {
  font-size: var(--xal-font-md);
  font-weight: 600;
  color: var(--xal-text-primary);
}

/* Gold highlight for the fighter with the stat advantage */
.xal-bout-tape__cell-value--advantage {
  color: var(--xal-gold);
  font-weight: 700;
}

/* Sub info beneath cell value (e.g. "✓ Verified") */
.xal-bout-tape__cell-sub {
  font-size: var(--xal-font-xs);
  color: var(--xal-text-muted);
  font-weight: 500;
  margin-top: 1px;
  display: block;
}

/* Label cell (center column) */
.xal-bout-tape__label-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.xal-bout-tape__row-label {
  font-size: var(--xal-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xal-gold);
  text-align: center;
}

.xal-bout-tape__row-sublabel {
  font-size: var(--xal-t-kpi-label-size);
  font-weight: 600;
  color: var(--xal-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}


/* ── 1g. Expanded — Admin Action Row ───────────────────────── */

.xal-bout-tape__actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--xal-border);
  flex-wrap: wrap;
}

.xal-bout-tape__action-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: var(--xal-radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--xal-font-family);
  font-size: var(--xal-font-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: var(--xal-transition-fast);
}

.xal-bout-tape__action-btn:hover { opacity: 0.82; }

.xal-bout-tape__action-btn--gold {
  background: var(--xal-gold);
  color: #000;
}

.xal-bout-tape__action-btn--secondary {
  background: var(--xal-bg-hover);
  color: var(--xal-text-secondary);
  border: 1px solid var(--xal-border-card);
}

.xal-bout-tape__action-btn--danger {
  background: var(--xal-status-unmatched-bg);
  color: var(--xal-status-unmatched);
  border: 1px solid var(--xal-status-unmatched-border);
}


/* ── 1h. Shared utility tags (PUBLIC / ADMIN labels) ─────────── */

.xal-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.xal-tag--public {
  background: var(--xal-status-checkedin-bg);
  color: var(--xal-status-checkedin);
  border: 1px solid var(--xal-status-checkedin-border);
}

.xal-tag--admin {
  background: var(--xal-gold-muted);
  color: var(--xal-gold);
  border: 1px solid var(--xal-gold-border);
}


/* ============================================================
   SECTION 2 — BOXER CARD
   Root: .xal-boxer-card
   Variants:
     .xal-boxer-card--compact
     .xal-boxer-card--expanded
   Status modifiers (on root):
     .xal-boxer-card--unmatched
     .xal-boxer-card--confirmed
     .xal-boxer-card--checkedin
   ============================================================ */

/* ── 2a. Root ──────────────────────────────────────────────── */

.xal-boxer-card {
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border);
  border-radius: var(--xal-radius-lg);
  overflow: hidden;
  position: relative;
}


/* ── 2b. Avatar ────────────────────────────────────────────── */

.xal-boxer-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
  position: relative;
}

.xal-boxer-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Size modifiers */
.xal-boxer-card__avatar--sm { width: 44px; height: 44px; font-size: var(--xal-font-lg); }
.xal-boxer-card__avatar--md {    width: 60px; height: 60px; font-size: var(--xal-font-xl);}
.xal-boxer-card__avatar--lg { width: 72px; height: 72px; font-size: var(--xal-font-2xl); }

/* Color palette — hash(name) % 8 + 1 */
.xal-boxer-card__avatar--c1 { background: var(--xal-avatar-c1); color: #e9d5ff; border-color: #7c3aed; }
.xal-boxer-card__avatar--c2 { background: var(--xal-avatar-c2); color: #bfdbfe; border-color: #3b82f6; }
.xal-boxer-card__avatar--c3 { background: var(--xal-avatar-c3); color: #bbf7d0; border-color: #22c55e; }
.xal-boxer-card__avatar--c4 { background: var(--xal-avatar-c4); color: #fecaca; border-color: #ef4444; }
.xal-boxer-card__avatar--c5 { background: var(--xal-avatar-c5); color: #fed7aa; border-color: #f97316; }
.xal-boxer-card__avatar--c6 { background: var(--xal-avatar-c6); color: #99f6e4; border-color: #14b8a6; }
.xal-boxer-card__avatar--c7 { background: var(--xal-avatar-c7); color: #ddd6fe; border-color: #8b5cf6; }
.xal-boxer-card__avatar--c8 { background: var(--xal-avatar-c8); color: #fce7f3; border-color: #ec4899; }

/* Status ring outlines */
.xal-boxer-card__avatar--ring-unmatched { outline: 2.5px solid var(--xal-status-unmatched); outline-offset: 2px; }
.xal-boxer-card__avatar--ring-confirmed  { outline: 2.5px solid var(--xal-status-matched);   outline-offset: 2px; }
.xal-boxer-card__avatar--ring-checkedin  { outline: 2.5px solid var(--xal-status-checkedin); outline-offset: 2px; }


/* ── 2c. Compact layout ─────────────────────────────────────── */

.xal-boxer-card--compact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px 11px 14px;
  cursor: pointer;
  transition: background var(--xal-transition-fast);
  border-radius: var(--xal-radius-lg);
}

.xal-boxer-card--compact:hover  { background: var(--xal-bg-hover); }
.xal-boxer-card--compact:active { background: rgba(255, 255, 255, 0.07); }

/* Status left-border accent */
.xal-boxer-card--compact.xal-boxer-card--unmatched { border-left: 3px solid var(--xal-status-unmatched); }
.xal-boxer-card--compact.xal-boxer-card--confirmed  { border-left: 3px solid var(--xal-status-matched); }
.xal-boxer-card--compact.xal-boxer-card--checkedin  { border-left: 3px solid var(--xal-status-checkedin); }

.xal-boxer-card__avatar-col { flex-shrink: 0; position: relative; }

.xal-boxer-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Boxer name */
.xal-boxer-card__name {
  font-size: var(--xal-font-lg);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin: 0;
}

/* Member ID */
.xal-boxer-card__member-id {
  font-size: var(--xal-font-sm);
  font-weight: 600;
  color: var(--xal-text-muted);
  letter-spacing: 0.03em;
}


.xal-boxer-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.xal-boxer-card__badge--weight {
  background: var(--xal-gold-muted);
  color: var(--xal-gold);
  border: 1px solid var(--xal-gold-border);
}

.xal-boxer-card__badge--division {
  background: rgba(255, 255, 255, 0.08);
  color: var(--xal-text-primary);
  border: 1px solid var(--xal-border-card);
}

.xal-boxer-card__badge--exp {
  background: rgba(255, 255, 255, 0.06);
  color: var(--xal-text-primary);
  border: 1px solid var(--xal-border);
}

/* Status badge row */
.xal-boxer-card__status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}

.xal-boxer-card__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Animated status dot via ::before */
.xal-boxer-card__status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xal-boxer-card__status-badge--unmatched {
  background: var(--xal-status-unmatched-bg);
  color: var(--xal-status-unmatched);
  border: 1px solid var(--xal-status-unmatched-border);
}
.xal-boxer-card__status-badge--unmatched::before {
  background: var(--xal-status-unmatched);
  box-shadow: 0 0 4px var(--xal-status-unmatched);
}

.xal-boxer-card__status-badge--confirmed {
  background: var(--xal-status-matched-bg);
  color: var(--xal-status-matched);
  border: 1px solid var(--xal-status-matched-border);
}
.xal-boxer-card__status-badge--confirmed::before {
  background: var(--xal-status-matched);
  box-shadow: 0 0 4px var(--xal-status-matched);
}

.xal-boxer-card__status-badge--checkedin {
  background: var(--xal-status-checkedin-bg);
  color: var(--xal-status-checkedin);
  border: 1px solid var(--xal-status-checkedin-border);
}
.xal-boxer-card__status-badge--checkedin::before {
  background: var(--xal-status-checkedin);
  box-shadow: 0 0 4px var(--xal-status-checkedin);
}

.xal-boxer-card__status-badge--withdrawn {
  background: var(--xal-status-withdrawn-bg);
  color: var(--xal-status-withdrawn);
  border: 1px solid var(--xal-status-withdrawn-border);
}
.xal-boxer-card__status-badge--withdrawn::before {
  background: var(--xal-status-withdrawn);
}

.xal-boxer-card__status-badge--unopposed {
  background: var(--xal-status-unopposed-bg);
  color: var(--xal-status-unopposed);
  border: 1px solid var(--xal-status-unopposed-border);
}
.xal-boxer-card__status-badge--unopposed::before {
  background: var(--xal-status-unopposed);
}

/* Gym row */
/* Club and location stack so each gets the row's full width. Side by side they
   share ~200px on a phone and BOTH ellipsize, which cuts the two fields a coach
   uses to identify a boxer ("Reyes Box… · West Valley Ci…"). Each line carries
   its own icon (building = the club, pin = where it is) so the two align. */
.xal-boxer-card__gym {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--xal-font-base);
  color: var(--xal-text-secondary);
  overflow: hidden;
}

.xal-boxer-card__gym-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.xal-boxer-card__gym-icon     { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.55; color: var(--xal-gold); }
.xal-boxer-card__gym-name     { font-weight: 600; color: var(--xal-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xal-boxer-card__gym-sep      { opacity: 0.4; margin: 0 1px; }
.xal-boxer-card__gym-location { color: var(--xal-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bouts count bubble */
.xal-boxer-card__bouts-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-md);
  min-width: 44px;
  padding: 6px 8px;
  gap: 1px;
}

.xal-boxer-card__bouts-num   { font-size: 20px; font-weight: 900; color: var(--xal-text-primary); line-height: 1; }
.xal-boxer-card__bouts-label { font-size: var(--xal-t-kpi-label-size);  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--xal-text-primary); }


/* ── 2d. Expanded layout ────────────────────────────────────── */

.xal-boxer-card--expanded {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* In the equal-width results grid the card can't grow to fit long text —
   name and member line truncate instead so every card stays the same size. */
.xal-boxer-card--expanded .xal-boxer-card__header-name,
.xal-boxer-card--expanded .xal-boxer-card__header-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Event status strip (expanded top bar) */
.xal-boxer-card__expanded-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--xal-border);
}

.xal-boxer-card__expanded-status-label {
  font-size: var(--xal-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--xal-text-muted);
}

/* Header: large avatar + name/id/badges */
.xal-boxer-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--xal-border);
}

.xal-boxer-card__header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xal-boxer-card__header-name {
  font-size: var(--xal-font-xl);
  font-weight: 800;
  color: var(--xal-text-primary);
  line-height: 1.15;
  margin: 0;
}

.xal-boxer-card__header-id {
  font-size: var(--xal-font-base);
  font-weight: 500;
  color: var(--xal-text-primary);
  letter-spacing: 0.03em;
}

.xal-boxer-card__header-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* 4-up stat bar */
.xal-boxer-card__stats {
  display: flex;
  border-bottom: 1px solid var(--xal-border);
}

.xal-boxer-card__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  gap: 2px;
  border-right: 1px solid var(--xal-border);
}

.xal-boxer-card__stat:last-child { border-right: none; }

.xal-boxer-card__stat-value    { font-size: var(--xal-font-lg); font-weight: 800; color: var(--xal-text-primary); line-height: 1; }
.xal-boxer-card__stat-sublabel { font-size: var(--xal-t-kpi-label-size); font-weight: 600; color: var(--xal-gold); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; }
.xal-boxer-card__stat-label    { font-size: var(--xal-font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted); margin-top: 1px; }

/* Data rows */
.xal-boxer-card__data {
  display: flex;
  flex-direction: column;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--xal-border);
}

.xal-boxer-card__data-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  min-height: 32px;
  transition: background var(--xal-transition-fast);
}

.xal-boxer-card__data-row:hover { background: var(--xal-bg-hover); }

.xal-boxer-card__data-icon  { width: 15px; height: 15px; flex-shrink: 0; color: var(--xal-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--xal-font-md); opacity: 0.7; }
.xal-boxer-card__data-label { font-size: var(--xal-font-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--xal-text-muted); width: 88px; flex-shrink: 0; }
.xal-boxer-card__data-value { font-size: var(--xal-font-md); font-weight: 500; color: var(--xal-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xal-boxer-card__data-value--gold  { color: var(--xal-gold); font-weight: 600; }
.xal-boxer-card__data-value--muted { color: var(--xal-text-muted); }

/* Public action buttons */
.xal-boxer-card__actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
}

.xal-boxer-card__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--xal-radius-md);
  border: none;
  cursor: pointer;
  font-family: var(--xal-font-family);
  font-size: var(--xal-font-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: var(--xal-transition-fast);
}

.xal-boxer-card__action-btn:hover  { opacity: 0.85; }
.xal-boxer-card__action-btn:active { opacity: 0.7; }

.xal-boxer-card__action-btn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* In-button spinner for the Removing… state — inherits the button's text color. */
.xal-btn-spinner {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xal-btn-spin 0.7s linear infinite;
}

@keyframes xal-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .xal-btn-spinner { animation: none; }
}

.xal-boxer-card__action-btn--primary   { background: var(--xal-gold); color: #000; }
.xal-boxer-card__action-btn--secondary {
  background: var(--xal-bg-hover);
  color: var(--xal-text-primary);
  border: 1px solid var(--xal-border-card);
}
.xal-boxer-card__action-btn--danger {
  background: transparent;
  color: var(--xal-red-bright);
  border: 1px solid var(--xal-red-border);
}

/* Removal sits below a rule, apart from the everyday actions it must not be mistapped for. */
.xal-boxer-card__actions--destructive {
  padding-top: 0;
  margin-top: 4px;
  border-top: 1px solid var(--xal-border-card);
}

/* Drawn-bracket boxers: removal lives on the Brackets tab, and this note takes the
   destructive strip's place to say so. */
.xal-boxer-card__locked-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 4px;
  border-top: 1px solid var(--xal-border-card);
}

.xal-boxer-card__locked-note-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--xal-font-md);
  line-height: 1.45;
  color: var(--xal-text-muted);
}

.xal-boxer-card__locked-note-text .xal-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Admin action strip (gold footer) */
.xal-boxer-card__admin-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px 12px;
  background: var(--xal-gold-muted);
  border-top: 1px solid var(--xal-gold-border);
  flex-wrap: wrap;
}

.xal-boxer-card__admin-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: var(--xal-radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--xal-font-family);
  font-size: var(--xal-font-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--xal-transition-fast);
  white-space: nowrap;
}

.xal-boxer-card__admin-btn:hover { opacity: 0.82; }

.xal-boxer-card__admin-btn--assign { background: var(--xal-gold); color: #000; }
.xal-boxer-card__admin-btn--edit   { background: var(--xal-status-checkedin-bg); color: var(--xal-status-checkedin); border: 1px solid var(--xal-status-checkedin-border); }
.xal-boxer-card__admin-btn--verify { background: var(--xal-status-confirmed-bg); color: var(--xal-status-confirmed); border: 1px solid var(--xal-status-confirmed-border); }
.xal-boxer-card__admin-btn--remove { background: var(--xal-status-unmatched-bg); color: var(--xal-status-unmatched); border: 1px solid var(--xal-status-unmatched-border); flex: none; padding: 7px 10px; }


/* ============================================================
   SECTION 3 — BRACKET CARD
   Root: .xal-bracket-card
   Division accent modifiers: .xal-bracket-card--{division}
   State modifiers: --selected, --no-draw
   ============================================================ */

/* ── 3a. Division accent color tokens ───────────────────────── */
/*
 * These are local tokens scoped to the bracket card.
 * Each division class sets --division-accent to a hue that
 * drives the weight icon color and the left-edge glow bar.
 */

:root {
  --xal-div-peewee:       #7B68EE;
  --xal-div-bantam:       #4FC3F7;
  --xal-div-intermediate: #81C784;
  --xal-div-junior:       #F06292;
  --xal-div-youth:        #FFB74D;
  --xal-div-subnovice:    #A5D6A7;
  --xal-div-novice:       #64B5F6;
  --xal-div-elite:        #D4AF37;
  --xal-div-open:         #EF9A9A;
  --xal-div-masters:      #CE93D8;
  --xal-div-female:       #F48FB1;
}


/* ── 3b. Bracket Card root ──────────────────────────────────── */

.xal-bracket-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-md);
  cursor: pointer;
  transition: background var(--xal-transition-fast), border-color var(--xal-transition-fast);
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Division accent left bar via ::before */
.xal-bracket-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--division-accent, var(--xal-gold));
  opacity: 0;
  transition: opacity var(--xal-transition-fast);
}

.xal-bracket-card:hover { background: var(--xal-bg-hover); }
.xal-bracket-card:hover::before { opacity: 0.5; }

/* Selected state */
.xal-bracket-card--selected {
  background: var(--xal-bg-selected) !important;
  border-color: var(--xal-gold-border) !important;
}
.xal-bracket-card--selected::before { opacity: 1; }

/* No Draw state */
.xal-bracket-card--no-draw { opacity: 0.72; }

/* Division accent class modifiers */
.xal-bracket-card--peewee       { --division-accent: var(--xal-div-peewee); }
.xal-bracket-card--bantam       { --division-accent: var(--xal-div-bantam); }
.xal-bracket-card--intermediate { --division-accent: var(--xal-div-intermediate); }
.xal-bracket-card--junior       { --division-accent: var(--xal-div-junior); }
.xal-bracket-card--youth        { --division-accent: var(--xal-div-youth); }
.xal-bracket-card--subnovice    { --division-accent: var(--xal-div-subnovice); }
.xal-bracket-card--novice       { --division-accent: var(--xal-div-novice); }
.xal-bracket-card--elite        { --division-accent: var(--xal-div-elite); }
.xal-bracket-card--open         { --division-accent: var(--xal-div-open); }
.xal-bracket-card--masters      { --division-accent: var(--xal-div-masters); }
.xal-bracket-card--female       { --division-accent: var(--xal-div-female); }


/* ── 3c. Bracket Card icon (weight class block) ─────────────── */

.xal-bracket-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--xal-radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xal-border-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.xal-bracket-card__icon-wgt {
  font-size: var(--xal-font-xl);
  font-weight: 800;
  color: var(--xal-gold, var(--xal-gold));
  line-height: 1;
}

.xal-bracket-card__icon-unit {
  font-size: var(--xal-t-kpi-label-size);
  font-weight: 600;
  color: var(--xal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}


/* ── 3d. Bracket Card body ──────────────────────────────────── */

.xal-bracket-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xal-bracket-card__name {
  font-size: var(--xal-font-lg);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xal-bracket-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}


/* ── 3e. Bracket Card right column (count + chevron) ─────────── */

.xal-bracket-card__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xal-bracket-card__count-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-sm);
  padding: 5px 10px;
  min-width: 44px;
}

.xal-bracket-card__count-num { font-size: var(--xal-font-xl); font-weight: 800; color: var(--xal-text-primary); line-height: 1; }
.xal-bracket-card__count-lbl { font-size: var(--xal-t-kpi-label-size); font-weight: 600; color: var(--xal-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.xal-bracket-card__chevron {
  color: var(--xal-text-muted);
  font-size: 20px;
  line-height: 1;
  transition: color var(--xal-transition-fast), transform var(--xal-transition-fast);
}

.xal-bracket-card--selected .xal-bracket-card__chevron {
  color: var(--xal-gold);
  transform: rotate(90deg);
}


/* ── 3f. Bracket List — Summary Strip ───────────────────────── */

.xal-bracket-list__summary {
  display: flex;
  background: var(--xal-bg-secondary);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}

.xal-bracket-list__summary-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid var(--xal-border-card);
}

.xal-bracket-list__summary-stat:last-child { border-right: none; }

.xal-bracket-list__summary-num { font-size: 20px; font-weight: 800; color: var(--xal-gold); line-height: 1; }
.xal-bracket-list__summary-lbl { font-size: var(--xal-t-kpi-label-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--xal-text-muted); margin-top: 3px; }


/* ── 3g. Bracket List — Mobile Filter ──────────────────────── */

.xal-bracket-mobile-page__filter { padding: 12px 0 8px; }

.xal-bracket-mobile-page__filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--xal-bg-input);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-md);
  padding: 8px 12px;
}

.xal-bracket-mobile-page__filter-icon  { color: var(--xal-text-muted); font-size: var(--xal-font-lg); }
.xal-bracket-mobile-page__filter-input { flex: 1; background: transparent; border: none; outline: none; color: var(--xal-text-primary); font-size: var(--xal-font-md); }
.xal-bracket-mobile-page__filter-input::placeholder { color: var(--xal-text-muted); }


/* ── 3h. Bracket Detail Panel ───────────────────────────────── */

.xal-bracket-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--xal-bg-surface, var(--xal-bg-secondary));
}

/* Detail header */
.xal-bracket-detail__header {
  background: var(--xal-bg-secondary);
  border-bottom: 1px solid var(--xal-border-card);
  padding: 16px 20px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.xal-bracket-detail__header-main { flex: 1; min-width: 0; }

.xal-bracket-detail__eyebrow {
  font-size: var(--xal-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--xal-text-muted);
  margin-bottom: 4px;
}

.xal-bracket-detail__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--xal-text-primary);
  line-height: 1.2;
  margin-bottom: 8px;
}

.xal-bracket-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.xal-bracket-detail__close-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--xal-border-card);
  border-radius: 50%;
  cursor: pointer;
  color: var(--xal-text-secondary);
  font-size: var(--xal-font-lg);
  transition: var(--xal-transition-fast);
}

.xal-bracket-detail__close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--xal-text-primary);
}

/* Detail stats bar */
.xal-bracket-detail__stats {
  display: flex;
  border-bottom: 1px solid var(--xal-border-card);
}

.xal-bracket-detail__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-right: 1px solid var(--xal-border-card);
}

.xal-bracket-detail__stat:last-child { border-right: none; }

.xal-bracket-detail__stat-num { font-size: 22px; font-weight: 800; color: var(--xal-gold); line-height: 1; }
.xal-bracket-detail__stat-lbl { font-size: var(--xal-t-kpi-label-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--xal-text-muted); margin-top: 3px; text-align: center; }

/* Detail body (scrollable) */
.xal-bracket-detail__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.xal-bracket-detail__body::-webkit-scrollbar       { width: 5px; }
.xal-bracket-detail__body::-webkit-scrollbar-track  { background: transparent; }
.xal-bracket-detail__body::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }

.xal-bracket-detail__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--xal-bg-secondary);
    border-top: 1px solid var(--xal-border);
    border-bottom: 1px solid var(--xal-border);
    flex-shrink: 0;
    gap: 8px;
}

.xal-bracket-detail__section-title {
  font-size: var(--xal-font-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--xal-text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--xal-border);
}

.xal-bracket-detail__section-count {
    font-size: var(--xal-font-lg);
    color: var(--xal-text-muted);
    font-weight: 600;
}

/* Boxer row in detail roster */
.xal-bracket-detail__boxers {
    display: flex;
    flex-direction: column;
}

.xal-bracket-detail__boxer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--xal-bg-card);
  border: 1px solid var(--xal-border-card);
  border-radius: var(--xal-radius-md);
  margin-bottom: 6px;
  transition: background var(--xal-transition-fast);
}

.xal-bracket-detail__boxer-row:hover { background: var(--xal-bg-hover); }

.xal-bracket-detail__boxer-info { flex: 1; min-width: 0; }

.xal-bracket-detail__boxer-name {
  font-size: var(--xal-font-lg);
  font-weight: 700;
  color: var(--xal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.xal-bracket-detail__boxer-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xal-bracket-detail__boxer-meta { font-size: var(--xal-font-sm); color: var(--xal-text-secondary); }
.xal-bracket-detail__boxer-status { flex-shrink: 0; }
.xal-bracket-detail__boxer-club {
    font-size: var(--xal-font-md);
    color: var(--xal-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.xal-bracket-detail__boxer-dob {
    font-size: var(--xal-font-md);
    color: var(--xal-text-muted);
    flex-shrink: 0;
}

.xal-bracket-detail__boxer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 1px;
    min-width: 38px;
}

.xal-bracket-detail__boxer-bout-count {
    font-size: var(--xal-font-lg);
    font-weight: 800;
    color: var(--xal-gold);
    line-height: 1;
}

.xal-bracket-detail__boxer-bout-lbl {
    font-size: var(--xal-t-kpi-label-size);
    font-weight: 700;
    color: var(--xal-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.xal-bracket-detail__actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 0 14px 12px;
    flex-shrink: 0;
}


/* Empty / idle state */
.xal-bracket-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 8px;
}

.xal-bracket-detail__empty-icon  { font-size: 36px; opacity: 0.5; margin-bottom: 4px; }
.xal-bracket-detail__empty-title { font-size: var(--xal-font-lg); font-weight: 700; color: var(--xal-text-secondary); }
.xal-bracket-detail__empty-desc  { font-size: var(--xal-font-md); color: var(--xal-text-muted); max-width: 260px; line-height: 1.6; }

.xal-bracket-detail__empty-action {
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--xal-gold-muted);
  border: 1px solid var(--xal-gold-border);
  border-radius: var(--xal-radius-md);
  color: var(--xal-gold);
  font-family: var(--xal-font-family);
  font-size: var(--xal-font-md);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--xal-transition-fast);
}

.xal-bracket-detail__empty-action:hover { background: var(--xal-gold-dim); }

/* Detail footer action bar */
.xal-bracket-detail__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--xal-border-card);
  display: flex;
  gap: 8px;
  background: var(--xal-bg-secondary);
  flex-wrap: wrap;
}


/* ── 3i. Bracket — Inline Bout Card (inside detail panel) ────── */
/*
 * NOTE: This is the bracket context bout card used inside
 * the detail panel to show bout assignments. It is a
 * lighter variant of the full .xal-bout-card system above.
 * Prefixed .xal-bout-card to keep class names consistent
 * but overrides structure for the narrower detail context.
 */

.xal-bracket-detail .xal-bout-card {
  margin-bottom: 8px;
  border-radius: var(--xal-radius-md);
}

.xal-bracket-detail .xal-bout-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--xal-bg-secondary);
  border-bottom: 1px solid var(--xal-border-card);
}

.xal-bout-card__num {
  font-size: var(--xal-font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--xal-gold);
}

.xal-bout-card__matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 12px;
}

.xal-bout-card__fighter {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xal-bout-card__fighter--right { align-items: flex-end; }

.xal-bout-card__fighter-name { font-size: var(--xal-font-md); font-weight: 700; color: var(--xal-text-primary); }
.xal-bout-card__fighter-meta { font-size: var(--xal-font-sm); color: var(--xal-text-secondary); }

.xal-bout-card__vs {
  text-align: center;
  padding: 0 12px;
  font-size: var(--xal-font-base);
  font-weight: 800;
  color: var(--xal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Info badges row */
.xal-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The avatar is a gutter; everything else shares ONE left edge, badges included.
   Badges sit under the head row rather than beside the bouts column, so they get
   ~267px instead of the ~207px that made MALE + PEEWEE 9/10 + 60LBS wrap by two
   pixels (worst real case, FEMALE + INTERMEDIATE + 105LBS, needs 238px). Full
   bleed would also fit, but it breaks the left edge the other five rows respect. */
.xal-boxer-card__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xal-boxer-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ── 3j. Shared Badge System (used across bracket + detail) ──── */

.xal-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--xal-radius-pill);
  font-size: var(--xal-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.xal-badge--green  { background: rgba(76,175,80,0.18);   color: #81C784; border: 1px solid rgba(76,175,80,0.25); }
.xal-badge--amber  { background: rgba(255,183,77,0.18);  color: #FFB74D; border: 1px solid rgba(255,183,77,0.25); }
.xal-badge--gray   { background: rgba(158,158,158,0.15); color: #9E9E9E; border: 1px solid rgba(158,158,158,0.2); }
.xal-badge--gold   { background: var(--xal-gold-muted);  color: var(--xal-gold); border: 1px solid var(--xal-gold-border); }
.xal-badge--blue   { background: rgba(33,150,243,0.15);  color: #64B5F6; border: 1px solid rgba(33,150,243,0.25); }
.xal-badge--purple { background: rgba(156,39,176,0.18);  color: #CE93D8; border: 1px solid rgba(156,39,176,0.25); }
.xal-badge--red    { background: rgba(244,67,54,0.15);   color: #EF9A9A; border: 1px solid rgba(244,67,54,0.2); }
.xal-badge--teal   { background: rgba(0,150,136,0.18);   color: #80CBC4; border: 1px solid rgba(0,150,136,0.25); }
.xal-badge--orange { background: rgba(255,107,53,0.15);  color: #FF8A65; border: 1px solid rgba(255,107,53,0.3); }
.xal-badge--pink   { background: rgba(236,64,122,0.15);  color: #F48FB1; border: 1px solid rgba(236,64,122,0.3); }
.xal-badge--neutral { background: transparent;           color: var(--xal-text); border: 1px solid var(--xal-border-card); }
.xal-badge--neutral-muted { background: transparent;     color: var(--xal-text-muted); border: 1px solid var(--xal-border); }




/* ── 3l. Bracket — Small Avatar (used in detail boxer rows) ──── */

.xal-boxer-avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--xal-font-md);
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Colour classes match xal-tokens --xal-avatar-c1…c8 */
.xal-boxer-avatar-sm.c1 { background: var(--xal-avatar-c1); }
.xal-boxer-avatar-sm.c2 { background: var(--xal-avatar-c2); }
.xal-boxer-avatar-sm.c3 { background: var(--xal-avatar-c3); }
.xal-boxer-avatar-sm.c4 { background: var(--xal-avatar-c4); }
.xal-boxer-avatar-sm.c5 { background: var(--xal-avatar-c5); }
.xal-boxer-avatar-sm.c6 { background: var(--xal-avatar-c6); }
.xal-boxer-avatar-sm.c7 { background: var(--xal-avatar-c7); }
.xal-boxer-avatar-sm.c8 { background: var(--xal-avatar-c8); }

.xal-score-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #1a1a1a;
    border: 1px solid #272727;
    border-radius: 14px;
    padding: 3px 8px 3px 6px;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* ============================================================
   STAT CARD + STAT STRIP  (.xal-stat-card / .xal-stat-strip)
   Single source of truth — shared by the public show listing,
   show details, and the event manager shell.

   Default:   <div class="xal-stat-card"><strong>128</strong><span>Registered</span></div>
   Compact:   label on top, smaller value —
              <div class="xal-stat-card xal-stat-card--compact"><span>Dates</span><strong class="is-gold">Jul 18</strong></div>
   Strip:     <div class="xal-stat-strip"> …stat cards… </div>
   ============================================================ */

.xal-stat-card {
    flex: 1;
    padding: 14px;
    text-align: center;
    border: 1px solid var(--xal-border-card);
    border-radius: var(--xal-radius-lg);
    background: rgba(255, 255, 255, .035);
}

    .xal-stat-card strong {
        display: block;
        color: var(--xal-gold);
        font-size: 32px;
        line-height: 1;
    }

    .xal-stat-card span {
        display: block;
        margin-top: 5px;
        color: var(--xal-text-secondary);
        font-size: var(--xal-t-body-size);
        font-weight: 950;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

/* Compact variant — uppercase label first, value below */
.xal-stat-card--compact span {
    margin-top: 0;
}

.xal-stat-card--compact strong {
    margin-top: 5px;
    color: var(--xal-text-primary);
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    line-height: 1.1;
}

.xal-stat-card strong.is-gold {
    color: var(--xal-gold);
}

/* Responsive strip of stat cards (4 → 3 → 2 columns) */
.xal-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

@media (max-width: 1180px) {
    .xal-stat-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899.98px) {
    .xal-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   MATCH SCORE  (.xal-matchscore-*)
   Select Opponent cards: per-axis quintile tracks, gap deltas,
   "favors" tags, and the tier verdict chip.
   Band colors come from --xal-band-1…5 in xal-tokens.css.
   ============================================================ */

.xal-matchscore-namerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* Tier verdict chip */
.xal-matchscore-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--xal-border-card);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    font-size: var(--xal-font-base);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--xal-text-primary);
}

.xal-matchscore-tier__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xal-matchscore-tier__n   { color: var(--xal-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

.xal-matchscore-tier--b1 .xal-matchscore-tier__dot { background: var(--xal-band-1); }
.xal-matchscore-tier--b2 .xal-matchscore-tier__dot { background: var(--xal-band-2); }
.xal-matchscore-tier--b3 .xal-matchscore-tier__dot { background: var(--xal-band-3); }
.xal-matchscore-tier--b4 .xal-matchscore-tier__dot { background: var(--xal-band-4); }
.xal-matchscore-tier--b5 .xal-matchscore-tier__dot { background: var(--xal-band-5); }

/* Axis rows */
.xal-matchscore-axes {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.xal-matchscore-axis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    padding: 6px 0;
    border-top: 1px solid var(--xal-border);
}

.xal-matchscore-axis:first-child { border-top: 0; }

.xal-matchscore-axis__label {
    flex: 0 0 78px;
    font-size: var(--xal-font-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xal-text-secondary);
}

.xal-matchscore-track { display: flex; gap: 3px; flex-shrink: 0; }

.xal-matchscore-track__seg {
    width: 15px;
    height: 8px;
    border-radius: 2px;
    background: var(--xal-bg-surface);
}

.xal-matchscore-axis__band {
    font-size: var(--xal-font-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: center;
}

.xal-matchscore-axis__delta {
    font-size: var(--xal-font-base);
    color: var(--xal-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Band color modifiers (filled segments + band number) */
.xal-matchscore--b1 .xal-matchscore-track__seg--on { background: var(--xal-band-1); }
.xal-matchscore--b2 .xal-matchscore-track__seg--on { background: var(--xal-band-2); }
.xal-matchscore--b3 .xal-matchscore-track__seg--on { background: var(--xal-band-3); }
.xal-matchscore--b4 .xal-matchscore-track__seg--on { background: var(--xal-band-4); }
.xal-matchscore--b5 .xal-matchscore-track__seg--on { background: var(--xal-band-5); }
.xal-matchscore--b1 .xal-matchscore-axis__band { color: var(--xal-band-1); }
.xal-matchscore--b2 .xal-matchscore-axis__band { color: var(--xal-band-2); }
.xal-matchscore--b3 .xal-matchscore-axis__band { color: var(--xal-band-3); }
.xal-matchscore--b4 .xal-matchscore-axis__band { color: var(--xal-band-4); }
.xal-matchscore--b5 .xal-matchscore-axis__band { color: var(--xal-band-5); }

/* "Favors" tag — deliberately neutral: advantage is a fact, not good/bad news */
.xal-matchscore-favors {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--xal-border);
    background: var(--xal-bg-surface);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: var(--xal-font-sm);
    font-weight: 600;
    color: var(--xal-text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

.xal-matchscore-favors svg { display: block; flex-shrink: 0; }

/* Legend strip above the card list */
.xal-matchscore-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 14px 2px 12px;
    font-size: var(--xal-font-sm);
    color: var(--xal-text-secondary);
}

.xal-matchscore-legend__key { display: inline-flex; align-items: center; gap: 5px; }

.xal-matchscore-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

.xal-matchscore-legend__swatch--b1 { background: var(--xal-band-1); }
.xal-matchscore-legend__swatch--b2 { background: var(--xal-band-2); }
.xal-matchscore-legend__swatch--b3 { background: var(--xal-band-3); }
.xal-matchscore-legend__swatch--b4 { background: var(--xal-band-4); }
.xal-matchscore-legend__swatch--b5 { background: var(--xal-band-5); }

/* Narrow panel / mobile: delta and favors wrap to their own line under the track */
@media (max-width: 480px) {
    .xal-matchscore-axis__delta { flex-basis: 100%; padding-left: 88px; }
    .xal-matchscore-favors { margin-left: 88px; }
    .xal-matchscore-axis:has(.xal-matchscore-axis__delta:empty) .xal-matchscore-axis__delta { display: none; }
}

/* Selected-boxer header (sticky above the opponent list) — mirrors the card layout:
   avatar | name + meta | stat chips right */
.xal-matchscore-selected {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 2px 14px;
    border-bottom: 2px solid var(--xal-red);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--xal-bg-page);
}

.xal-matchscore-selected__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xal-matchscore-selected__stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Footer row inside the card — ties the action to the boxer it selects */
.xal-matchscore-card__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.xal-matchscore-card { padding: 14px 16px 12px; cursor: default; }
.xal-matchscore-card:hover { background: var(--xal-bg-card); }

.xal-matchscore-legend__hint {
    flex-basis: 100%;
    color: var(--xal-text-muted);
    font-size: var(--xal-font-sm);
}

@media (max-width: 480px) {
    .xal-matchscore-selected { flex-wrap: wrap; }
    .xal-matchscore-selected__stats { width: 100%; }
}