/* ============================================================================
   SportConnect brand metrics — SPCN (skill score) and SCR (rank)
   Markup comes from Helpers/ScBrandHelper.cs (Razor) and Scripts/shared/sc-brand.js (JS);
   both emit identical HTML:

     <span class="sc-metric sc-metric--spcn sc-metric--md">
       <span class="sc-metric__brand" data-sc-tip="…"><svg class="sc-metric__mark"/>SPCN</span>
       <span class="sc-metric__val [trustLn|score-over]">3.50</span>
     </span>

   Sizes: --sm (list rows) | --md (default) | --lg (profile hero). --tag-only drops the
   value segment. Colours are the --brand-* tokens in theme-v2.css (dark + light).
   The tooltip lives on the brand segment only, so it never collides with the
   .trustLn / .score-over hover tooltips on the value. See Docs/DESIGN_SYSTEM.md.
   ============================================================================ */

.sc-metric {
    --scm-solid: var(--brand-spcn-solid);
    --scm-on: var(--brand-spcn-on);
    --scm-bg: var(--brand-spcn-bg);
    --scm-border: var(--brand-spcn-border);
    --scm-val: var(--brand-spcn-solid);
    --scm-fs: var(--font-size-sm);
    --scm-pad-y: 2px;
    --scm-pad-x: 7px;
    --scm-mark: 12px;
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    max-width: 100%;
    border-radius: var(--radius-pill);
    font-size: var(--scm-fs);
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sc-metric--scr {
    --scm-solid: var(--brand-scr-solid);
    --scm-on: var(--brand-scr-on);
    --scm-bg: var(--brand-scr-bg);
    --scm-border: var(--brand-scr-border);
    --scm-val: var(--tint-gold-fg);
}

.sc-metric--sm { --scm-fs: var(--font-size-xs); --scm-pad-y: 1px; --scm-pad-x: 6px; --scm-mark: 10px; }
.sc-metric--lg { --scm-fs: var(--font-size-lg); --scm-pad-y: 4px; --scm-pad-x: 12px; --scm-mark: 18px; }

/* Brand segment: filled pill-left with the mark + tag. */
.sc-metric__brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--scm-pad-y) var(--scm-pad-x);
    background: var(--scm-solid);
    color: var(--scm-on);
    border: 1px solid var(--scm-solid);
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: help;
}
.sc-metric__mark {
    flex: 0 0 auto;
    width: var(--scm-mark);
    height: var(--scm-mark);
    display: block;
}

/* Value segment: outlined pill-right. Trust / over-cap classes colour the text. */
.sc-metric__val {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--scm-pad-y) var(--scm-pad-x);
    background: var(--scm-bg);
    color: var(--scm-val);
    border: 1px solid var(--scm-border);
    border-left: 0;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    font-weight: 700;
    min-width: 0;
}
.sc-metric__sub {
    font-weight: 600;
    font-size: 0.82em;
    opacity: 0.85;
}
.sc-metric__delta { font-weight: 700; font-size: 0.82em; }
.sc-metric__delta--up { color: var(--color-success); }
.sc-metric__delta--down { color: var(--color-danger); }
.sc-metric__empty { opacity: 0.7; font-weight: 600; }

/* Tag only (value shown elsewhere): the brand segment becomes a full pill. */
.sc-metric--tag-only .sc-metric__brand { border-radius: var(--radius-pill); }

/* Tooltip on the brand segment. */
.sc-metric__brand[data-sc-tip]:hover::after,
.sc-metric__brand[data-sc-tip]:focus-visible::after {
    content: attr(data-sc-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--brand-tip-bg);
    color: var(--brand-tip-fg);
    box-shadow: var(--shadow-dropdown);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
}

/* Header context: a tag-only pill beside a column / field label. */
.sc-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Registration hosts: a slot holds one badge whose content is re-rendered by script
   (confirm card) or built per row (registered list). The "registered" (at-signup) score is
   visually secondary to the live one. */
.reg-score-slot,
.reg-team-score-slot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.reg-team-score-slot i {
    font-size: 11px;
    color: var(--color-text-muted);
}
.reg-score-slot--registered .sc-metric,
.reg-team-score-slot--registered .sc-metric,
.reg-player-score--registered .sc-metric {
    opacity: 0.8;
}

/* Block-level hosts (form labels, headings) stay full-width rows. */
label.sc-metric-label,
h3.sc-metric-label,
h4.sc-metric-label {
    display: flex;
}

@media (max-width: 480px) {
    .sc-metric--lg { --scm-fs: var(--font-size-md); --scm-pad-x: 9px; --scm-mark: 15px; }
}