/* Compact "clock icon · value · chevron" control — see RefreshInterval.tsx
   for why this isn't `SelectField`'s label+bordered-control chrome. Quiet
   until interacted with (no border/fill at rest), matching LinksMenu's
   header-button treatment so it reads as chrome, not a form. */
.ui-refresh-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75em;
  padding: 0 0.6em;
  border: 1px solid transparent;
  border-radius: 0.4em;
  color: var(--muted);
  font-size: 0.9em;
}
.ui-refresh-picker:hover,
.ui-refresh-picker:focus-within {
  border-color: var(--border);
  background: var(--bg);
  color: var(--fg);
}
/* The Listbox contributes only its value and chevron: its own box is
   invisible and as wide as the value, so the picker's border is the one
   that shows. */
.ui-refresh-picker .ui-listbox {
  width: auto;
}
.ui-refresh-picker-select.ui-form-control {
  width: auto;
  min-height: 2.5em;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
}
.ui-refresh-picker-icon {
  font-size: 0.85em;
  line-height: 1;
}