/* ──────────────────────────────────────────────────────────────────────
   Skill Pills - shared styling for proficiency / importance pills.

   Usage:
     <span class="skill-pill" style="--pill-color: #4F87E6;">Competent</span>

   The --pill-color CSS variable drives text and border color via
   color-mix() to match the TrainStationEditor stop appearance.
   ────────────────────────────────────────────────────────────────────── */

.skill-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: var(--skill-pill-font-weight, 500);
    white-space: nowrap;
    line-height: 1.4;
    background: transparent;
    /* Match the train-station dot color-mix so pills look identical to selected stops */
    color: color-mix(in srgb, var(--pill-color, #333) 65%, white 25%);
    border: 1px solid color-mix(in srgb, var(--pill-color, rgba(0,0,0,0.12)) 65%, white 25%);
}

.skill-pill:hover {
    border-color: color-mix(in srgb, var(--pill-color, #333) 50%, white 50%);
}