/* Unit u01 shared UI: the city picker (combobox) used by the time zone, distance and map tools. */
.tool .u01-picker { position: relative; }
.tool .u01-picker input { text-overflow: ellipsis; }
.tool .u01-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 312px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 16px 40px rgb(38 8 64 / .18);
  transform-origin: top center; animation: u01-in .16s cubic-bezier(.23, 1, .32, 1);
}
.tool .u01-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  font-size: 15px; line-height: 20px;
}
.tool .u01-list li + li { margin-top: 2px; }
.tool .u01-list li[aria-selected="true"] { background: rgb(var(--accent) / .12); }
@media (hover: hover) { .tool .u01-list li:hover { background: rgb(var(--accent) / .08); } }
.tool .u01-opt-name { font-weight: 800; color: rgb(var(--ink)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .u01-opt-meta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: rgb(var(--ink) / .5); font-variant-numeric: tabular-nums; }
.tool .u01-empty { color: rgb(var(--ink) / .55); cursor: default; font-weight: 650; }
@keyframes u01-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tool .u01-list { animation: none; } }