/* cv-flags.css — the one place the language flags are drawn.
 *
 * They were written as CSS gradients inside _VoiceRecorder.cshtml, which was fine while the
 * recorder was the only thing that offered a language. It is not any more: the report popup has a
 * Translate picker, and a second copy of seven flags is a second copy of seven colours to keep in
 * step. So the colours live here once and both call sites load this file.
 *
 * Two class names per language on purpose: .vr-flag--xx is what the recorder's markup already
 * says, .cv-flag--xx is what anything new says. Same rule, so they cannot drift apart.
 *
 * These are the one place in the UI where colour is allowed inside a picture: a flag IS its
 * colours — a line-art outline of the Netherlands and of France is the same rectangle. Everything
 * else stays a line icon that takes the colour of the text around it.
 */

.cv-flag {
    width: 26px;
    height: 17px;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
}

/* UK / English — simplified Cross of St George on Union Jack blue */
.cv-flag--en,
.vr-flag--en {
    background:
        linear-gradient(to right, transparent 44%, #C8102E 44%, #C8102E 56%, transparent 56%),
        linear-gradient(to bottom, transparent 36%, #C8102E 36%, #C8102E 64%, transparent 64%),
        linear-gradient(to right, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        linear-gradient(to bottom, transparent 30%, #fff 30%, #fff 70%, transparent 70%),
        #012169;
}
/* Netherlands — red / white / blue horizontal */
.cv-flag--nl,
.vr-flag--nl {
    background: linear-gradient(to bottom,
        #AE1C28 0 33.3%,
        #ffffff 33.3% 66.7%,
        #21468B 66.7%);
}
/* Germany — black / red / gold horizontal */
.cv-flag--de,
.vr-flag--de {
    background: linear-gradient(to bottom,
        #000000 0 33.3%,
        #DD0000 33.3% 66.7%,
        #FFCE00 66.7%);
}
/* France — blue / white / red vertical */
.cv-flag--fr,
.vr-flag--fr {
    background: linear-gradient(to right,
        #002395 0 33.3%,
        #ffffff 33.3% 66.7%,
        #ED2939 66.7%);
}
/* Spain — red / yellow / red horizontal (25% / 50% / 25%) */
.cv-flag--es,
.vr-flag--es {
    background: linear-gradient(to bottom,
        #AA151B 0 25%,
        #F1BF00 25% 75%,
        #AA151B 75%);
}
/* Italy — green / white / red vertical */
.cv-flag--it,
.vr-flag--it {
    background: linear-gradient(to right,
        #009246 0 33.3%,
        #ffffff 33.3% 66.7%,
        #CE2B37 66.7%);
}
/* No flag for this language.
 *
 * The file has promised a .cv-flag--xx since it was written and never defined one, so a language
 * outside the seven drew an EMPTY box: .cv-flag gives it a size and a border and nothing filled
 * it in. Found on the CrewMate mic button, which takes the player's own language — Swedish,
 * Polish and Turkish are all real answers there. (2026-08-30)
 *
 * Deliberately not a flag: a neutral swatch says "a language, not one of the seven we draw",
 * where a wrong flag would say something false. The code itself is in the element's tooltip. */
.cv-flag--xx,
.vr-flag--xx {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.35) 0 45%, transparent 45%),
        #94a3b8;
}
/* Portugal — green / red vertical (40% / 60%) */
.cv-flag--pt,
.vr-flag--pt {
    background: linear-gradient(to right,
        #006600 0 40%,
        #FF0000 40%);
}