Show flags instead of the EN/PT text label

- Map the xkb brief that shortLabel() returns to a regional-indicator
  pair: EN -> US flag, PT -> Portugal flag. Anything unlisted falls back
  to the text label, so adding a third layout degrades to "DE" rather
  than rendering nothing. The flags are not glyphs in the bar font
  (CaskaydiaMono) — they resolve via fontconfig fallback to Noto Color
  Emoji.

- Size the label explicitly rather than at Style.font.caption: a flag
  reads far smaller than letterforms at the same point size. Pinned in
  Style.space units so it holds its pixel size across shell base-size
  changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

KeyboardLayout.qml

@@ -30,7 +30,21 @@ BarWidget {
   // Short language code per layout description ("English (US)": "en"), read from
   // xkb's own table rather than maintained by hand.
   property var layoutBriefs: ({})
-  readonly property string layoutLabel: KeyboardLayoutModel.shortLabel(layoutFull, layoutBriefs)
+  // Flag per layout instead of the "EN"/"PT" text label. Keyed on what
+  // shortLabel() returns: the xkb brief, uppercased and cut to 3 chars.
+  // Anything not listed falls back to that text label, so adding a third
+  // keyboard layout degrades to "DE" rather than showing nothing.
+  //
+  // These are regional-indicator pairs, not glyphs in the bar font
+  // (CaskaydiaMono). They render via fontconfig fallback to Noto Color Emoji.
+  readonly property var layoutFlags: ({
+    "EN": "🇺🇸",
+    "PT": "🇵🇹"
+  })
+  readonly property string layoutLabel: {
+    var base = KeyboardLayoutModel.shortLabel(layoutFull, layoutBriefs)
+    return layoutFlags[base] || base
+  }
 
   // A query already in flight was started before this event, so it may read the
   // layout the switch replaced. Remember the request and re-run once it lands
@@ -210,7 +224,10 @@ BarWidget {
     anchors.fill: parent
     bar: root.bar
     text: root.layoutLabel
-    fontSize: Style.font.caption
+    // Stock uses Style.font.caption, the smallest token in the scale. A flag
+    // glyph reads far smaller than letterforms at the same point size, so this
+    // steps up to heading (base * 1.333). Tune here: title < heading < display.
+    fontSize: Style.space(14)
     horizontalMargin: 6
     tooltipText: root.layoutFull
     onPressed: function() { root.cycleLayout() }