/* LM country flags — the SVG <img> from lm_flag_html() / LM.flagHtml().

   Sized in em, so a flag takes the size the emoji had: every wrapper
   (.dc-flag, .lm-lang-flag, …) keeps its own font-size rule. A flag emoji
   advances 1em (measured: 16.2px at 16px in Chrome), and tight rows were
   tuned to that — e.g. three language flags + age in a 360px Discover card
   (.dc-card-langs is one clipped line). So 1em wide, 4:3, RECTANGULAR —
   flags are never rounded: border-radius / clip-path are forced off against
   parent rules like `.x img { border-radius: 50% }`. */
img.lm-flag {
  display: inline-block;
  flex: none;
  width: 1em !important;
  height: .75em !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  clip-path: none !important;
  object-fit: cover;
  vertical-align: -.05em;
  /* hairline so white-edged flags (JP, FI, …) don't dissolve into a white card */
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14);
  user-select: none;
  -webkit-user-drag: none;
}

/* No SVG for this code: a readable code chip in the flag's 1em × .75em box
   (own font .5em → 2em × 1.5em). Outline via inset shadow so it adds no size.
   Doubled class: beats the old orphan .lm-flag rule in lm-profile.css (inline-flex). */
.lm-flag.lm-flag--code {
  display: inline-block;
  flex: none;
  min-width: 2em;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px currentColor;
  font: 700 .5em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  opacity: .75;
}

/* Flag inside a text field. An <input> value can't hold an image, so the flag
   sits in a sibling slot laid over the field (same idea as the brand location
   field, .lm-be-loc-flag). Default = trailing; --start = leading. The field
   only gets the extra padding while the slot holds a flag. */
.lm-flag-field { position: relative; }
.lm-flag-field-slot {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: 14px;            /* the flag used to be inline text at the field's size */
  line-height: 1;
  pointer-events: none;
}
.lm-flag-field-slot:empty,
.lm-flag-field > [hidden] ~ .lm-flag-field-slot { display: none; }
.lm-flag-field--start .lm-flag-field-slot { right: auto; left: 12px; }
.lm-flag-field:not(.lm-flag-field--start):has(> .lm-flag-field-slot:not(:empty)) > input { padding-right: 40px; }
.lm-flag-field--start:has(> .lm-flag-field-slot:not(:empty)) > input { padding-left: 40px; }