.select-container{position:relative;}
.select-input{padding:8px;border: 1px solid var(--color-5);box-sizing:border-box;text-align: center;width: 220px;max-width: 100%;}
.select-dropdown{position:absolute;top:100%;left: 50%;width: calc(100% - 20px);border: 1px solid var(--color-4);border-top:none;display:none;max-height:200px;overflow-y:auto;z-index:1000;box-sizing:border-box;background: var(--color-3);color: var(--color-8);transform: translateX(-50%);max-width: 200px;}
.select-dropdown.show{display:block;}
/* A ROW IS A ROW, whatever it holds.
   The height came from padding, so a row with a flag and a row without were
   different heights and the list did not scan as a column. It is stated now, and
   the flag sits inside it rather than setting it. */
.select-dropdown div{display:flex;align-items:center;gap:10px;
  height:40px;padding:0 12px;box-sizing:border-box;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid var(--color-4);
  transition:background-color .12s}
/* THE HOVER USED TO BE INVISIBLE. It painted var(--color-3) on a panel that IS
   var(--color-3) -- measured as #ddd on #ddd -- so two hundred and forty-nine
   rows gave no sign of which one the pointer was on. --color-4 is one step off
   the panel in both directions, on every theme. */
.select-dropdown div:hover{background-color:var(--color-4);}
/* THE ONE ALREADY CHOSEN, marked with a tick rather than a colour.
   Hover is var(--color-4), so tinting the chosen row the same would make the two
   states the same thing. And the accent measures 1.12 against var(--color-4) on
   the light themes -- a coloured bar would have been invisible on half of them,
   which is the fault the focus ring and the eye both had. A tick in var(--color-9)
   reads everywhere, and says something a tint cannot: this one, specifically.
   margin-inline-start:auto puts it at the trailing edge in both directions. */
.select-dropdown div.chosen{color:var(--color-9);}
.select-dropdown div.chosen::after{content:"";flex:0 0 auto;width:14px;height:14px;
  margin-inline-start:auto;background:var(--color-9);
  -webkit-mask:var(--sel-tick) no-repeat center / contain;
  mask:var(--sel-tick) no-repeat center / contain;}
.select-dropdown{--sel-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");}
/* a flag needs an edge of its own: the light ones have no boundary against a
   light panel and read as a hole in the row */
.select-dropdown div img{flex:0 0 auto;width:26px;height:17px;margin:0;
  object-fit:cover;border-radius:var(--surface-radius-2, 3px);
  box-shadow:inset 0 0 0 1px rgb(128 128 128 / .35);display:block;}
.search-input{width:calc(100% - 10px);padding:5px;margin:5px;border: 1px solid var(--color-5);box-sizing:border-box;box-shadow: 0 0 100px 100px inset var(--color-3), 0 0 6px 10px var(--color-3);position: sticky;top: 5px;}
.select-dropdown div span{max-width: 220px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}