/* ══════════════════════════════════════════════════════════════
   PATTERN — Score display
   Large numeric score shown prominently on result pages, with
   optional unit, label, direction text, and comparison hint.

   Markup:
     <div>
       <div class="score-hero">42<span class="score-unit">/100</span></div>
       <div class="score-label">STRAT-poäng</div>
       <div class="score-comparison">Topp 25% av jämförda strategier</div>
     </div>

     <div class="direction-axes">
       <div class="direction-axis">
         INNOVATIV
         <div class="direction-axis-label">Strategisk inriktning</div>
         <div class="direction-axis-value">+0.42</div>
       </div>
     </div>

   Used by: STRATEGIANALYS
   Candidates: any app with prominent numeric scoring (SORTERA result,
   STYRNING balance, MALBILDER coverage)
   ══════════════════════════════════════════════════════════════ */

.score-hero {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.score-hero-label {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.score-unit {
    font-size: 0.5em;
}

.score-label {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.score-direction {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.score-comparison {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* ── Direction axes (multi-axis label cluster) ── */
.direction-axes {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.direction-axis {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.direction-axis-label {
    font-size: 0.4em;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
}

.direction-axis-value {
    font-weight: 400;
    font-size: 0.5em;
    color: var(--muted);
}