/* ============================================================================
   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. Every dimension is "design size x --scm-scale" (0.6 = 40% smaller than the
   original 1.0 design); a host makes the badge larger or smaller by setting --scm-scale on
   .sc-metric (e.g. the profile SPCN hero card in profile-v2.css). 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);
    /* Design size (scale 1.0) - md; --sm / --lg below only change these four. */
    --scm-scale: 0.6;
    --scm-fs-base: 12px;
    --scm-py-base: 2px;
    --scm-px-base: 7px;
    --scm-mark-base: 12px;
    --scm-fs: max(7px, calc(var(--scm-fs-base) * var(--scm-scale)));
    --scm-pad-y: calc(var(--scm-py-base) * var(--scm-scale));
    --scm-pad-x: calc(var(--scm-px-base) * var(--scm-scale));
    --scm-mark: max(7px, calc(var(--scm-mark-base) * var(--scm-scale)));
    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-base: 11px; --scm-py-base: 1px; --scm-px-base: 6px; --scm-mark-base: 10px; }
.sc-metric--lg { --scm-fs-base: 16px; --scm-py-base: 4px; --scm-px-base: 12px; --scm-mark-base: 18px; }

/* Brand segment: filled pill-left with the mark + tag. */
.sc-metric__brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--scm-scale));
    padding: var(--scm-pad-y) var(--scm-pad-x);
    background: var(--scm-solid);
    /* Always the "on brand" colour: a host's inherited / trust / muted text colour must never reach it. */
    color: var(--scm-on) !important;
    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: calc(5px * var(--scm-scale));
    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;
}

/* Hero pill (.fw-badge, full-width-layout.css) that holds an SPCN badge + a qualifier ("Doubles"). */
.fw-badge--spcn {
    padding: 3px 10px 3px 4px;
    gap: 6px;
}